Question

目录结构：

index.html
--admin
----suit.css

css文件的部分是：

#suit-left{width:200px;right:240px;margin-left:-100%}
.suit-columns{padding-left:200px;padding-right:40px;}

我想在index.html中编写一个javascript代码：

<button onclick="">Change CSS</button>

更改css文件，如下所示：

#suit-left { display: none; }
.suit-columns { padding-left: 0; }

我该怎么做？问候，非常感谢

Answer 1

如果您希望通过javascript对特定元素应用css，请执行以下操作。

<button onclick="changeCss()">Change CSS</button>

更新

<script>
    function changeCss(){
        var suitInput = document.getElementById('suit-left');
        suitInput.style.display = 'none';

        //UPDATED the answer    
        var siteCol = document.getElementsByClassName('suit-columns')[0];
        siteCol.style.paddingLeft = '0';
        //siteCol.style.paddingRight = '0'; //incase of want padding right 0
    }
</script>

Answer 2

我建议这里操作与元素相关的类，而不是更改类定义本身。

这是一个简单的例子：

.sideBar{ /* your normal rules here */ }
.sideBar.hidden { display:none; }

为了隐藏侧边栏，您只需要将hidden类名添加到元素中。

通过这种方式，您可以在侧边栏打开时为侧边栏定义CSS规则，并在其关闭时为其定义不同的规则。一旦你预先定义了这两个状态，你所要做的就是更改/添加/删除类来隐藏/显示你的侧边栏。

我觉得这是你问题的主要问题。您希望执行的其他任务（如单击按钮或实际操作类属性）已在许多帖子中介绍过。以下是一些有用的链接 -

Answer 3

您可以用这种方式编写脚本并在index.html的head块下面粘贴到脚本下面我假设你对jquery有所了解。

<script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">    </script>   
<script>
$(document).ready(function(){
function ChangeCss(){
 $('#suit-left').css('display','none');
 $('.suit-columns').css('padding-left','0');
}
<script>

<button onclick="ChangeCss();" >

现在它会有所帮助！

所以基本上使用jquery的css函数你可以改变css / style属性。我希望它会对你有所帮助。

如何编写javascript脚本来修改此css文件？

3 个答案: