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

目录结构：

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>

---

我该怎么做呢？尊敬的，非常感谢

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

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

更改CSS

更新

<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>

函数changeCss（）{
var suiteInput=document.getElementById（'suit-left'）；
SuiteInput.style.display='none'；
//更新了答案
var siteCol=document.getElementsByClassName（'suit-columns'）[0]；
siteCol.style.paddingLeft='0'；
//siteCol.style.paddingRight='0'；//如果需要，请右键填充0
}

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

下面是一个简单的例子：

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

为了隐藏侧边栏，只需将

hidden

类名添加到元素中

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

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

---

您可以用这种方式编写脚本，并将脚本粘贴到index.html的头块下面 我假设您了解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();" >

$（文档）.ready（函数（）{
函数ChangeCss（）{
$（'suit left'）.css（'display'，'none'）；
$（'.suit columns'）.css（'padding-left'，'0'）；
}

现在它会有帮助的

因此，基本上使用jquery的css函数可以更改css/样式属性。

---

我希望它能帮助你。

XY问题就这样。你为什么需要这个？你想更改实际的CSS规则，还是只修改屏幕上的元素？感谢Hashem Qolami帮助我编辑代码格式。请你指导我好吗？@BruceZhong-请回答上面评论中的问题，以便我们更好地了解你在尝试什么因为我想修改它以实现目标：使侧边栏自动隐藏。所以我不知道修改CSS规则或修改屏幕上的元素是否更合适。谢谢，它运行得很好，但我想我忘记了的全部代码。

suit columns{padding left:200px；padding right:40px；}

它必须是

#content h1、#content h2、#content h3、#content h4、#content alert{文本阴影：0 1px rgba（255255255,0.5）}的一部分。适合列{左填充：200px；右填充：40px；}

那么我如何修改

。suit columns

？@downvoter你能解释一下为什么我可以修改它吗？那么你想在元素上应用上面的css，哪个类名是

。suit columns

？对不起，我不小心投了反对票，我想投赞成票~当我有了声誉分数时，我会投赞成票~对不起，我是新手，请原谅我e~没问题，下次要小心，请回答我向你提出的问题。谢谢你的帮助，我会检查文件的

<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();" >