Cách thay đổi giá trị ngược đối diện bằng cách sử dụng jQuery

Question

Tôi đang có cấu trúc HTML/CSS sau.

CSS:

<style> 
    #main { 
     width: 100%; 
    } 

    #main-title { 
     background-color: #b5dcb3; 
     width: 100% 
    } 

    #menu { 
     background-color: #aaa; 
     height: 200px; 
     width: 100px; 
     float: left; 
    } 

    #right-menu { 
     background-color: #aaa; 
     height: 200px; 
     width: 100px; 
     float: right; 
    } 

    #content { 
     background-color: #eee; 
     height: 200px; 
     width: 350px; 
     float: left; 
    } 

    #footer { 
     background-color: #b5dcb3; 
     clear: both 
    } 
</style> 

HTML:

<div id="main"> 
    <div id="main-title"> 
     <h1>This is Web Page Main title</h1> 
    </div> 
    <div id="menu"> 
     <div><b>Main Menu</b></div> 
     HTML 
     <br /> PHP 
     <br /> PERL... 
    </div> 
    <div id="content"> 
     <p>Technical and Managerial Tutorials</p> 
    </div> 
    <div id="right-menu"> 
     <div><b>Right Menu</b></div> 
     HTML 
     <br /> PHP 
     <br /> PERL... 
    </div> 
    <div id="footer"> 
     <center> 
      Copyright Area 
     </center> 
    </div> 
</div> 

Bây giờ tôi muốn áp dụng hiệu ứng gương như WHERE float:left được thay đổi để float:right và cùng ngược ĐÂU float:right được thay đổi để float:left.

mẫu Mã số: http://jsfiddle.net/mananpatel/mw1sxpx0/

Lưu ý: Tôi đang giữ trong hồ sơ khác nhau cho float: lớp trái và float: lớp đúng.

Bất kỳ ý tưởng nào về cách thực hiện điều này với mã jQuery trên page load.

Answer 1

Hãy thử điều này: Bạn có thể thay đổi thuộc tính phong cách css của menu như dưới đây

$(function(){ 
    $('#menu').css('float','right'); 
    $('#right-menu').css('float','left'); 
}); 

JSFiddle Demo

Answer 2

Bạn có thể tạo các lớp học khác nhau như

.floatright { 
float: right; 
} 
.floatleft { 
float: left; 
} 

và bao gồm này bất cứ nơi nào áp dụng . Trên chức năng sẵn sàng của tài liệu(), bạn có thể viết

$('.floatright').css('float','left'); 
$('.floatleft').css('float','right'); 

Đây sẽ là giải pháp tôi đoán.

Sẽ kiểm tra các giải pháp khác và cho bạn biết nếu được tìm thấy.

Phương pháp khác: Thử mã này.

$("*").filter(function() { 
if(/^(left)$/.test($(this).css("float"))) { 
$(this).css("float","right"); 
} 

else if(/^(right)$/.test($(this).css("float"))) { 
$(this).css("float","left") 
} 
}); 

Answer 3

Chúng tôi có thể cung cấp thuộc tính khác nhau sử dụng .css chúng ta nên biết Id (elementId) chỉ

$ ('# elementId') css ({ 'chiều cao':. '70px', 'width ':' 280px ', ' display ':' inline-block ', ' float ':' left ', });