Question

我有以下HTML / CSS结构。

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>

现在我想应用镜像效果，例如WHERE float:left更改为float:right，同样反向WHERE float:right更改为float:left。

代码示例：http://jsfiddle.net/mananpatel/mw1sxpx0/

注意：我为float保留了不同的文件：left class和float：right class。

知道如何使用page load上的jQuery代码执行此操作。

Answer 1

试试这个：您可以更改菜单的css样式属性，如下所示

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

<强> JSFiddle Demo

Answer 2

您可以创建不同的类

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

并在适用的地方包括此内容。在文档就绪功能（）上，您可以编写

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

我猜这将是一个解决方案。

将检查其他解决方案，如果找到则会通知您。

另一种方法：试试这段代码。

$("*").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

我们可以使用.css给出各种属性我们应该只知道Id（elementId）

$（ '＃elementId'）。CSS（{ '身高'：'70px'， 'width'：'280px'， 'display'：'inline-block'， '向左飘浮'， }）;

如何使用jQuery更改float相反的值

3 个答案: