如何編寫JavaScript腳本來修改此CSS文件？

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>

UPDATE

<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規則，並在其關閉時定義不同的規則。 一旦預先定義了這兩種狀態，您要做的就是更改/添加/刪除類以隱藏/顯示側邊欄。

我覺得這是您這里問題的主要問題。 您希望執行的其他任務（例如單擊按鈕或實際操作class屬性）已在許多文章中介紹。 這是一些對您有用的鏈接-

• 將類添加到給定的元素
• 使用HTML按鈕調用JS函數

Answer 3

您可以通過這種方式編寫腳本，然后將其粘貼到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();" >

現在它將有所幫助！

因此，基本上可以使用jss的css函數來更改css / style屬性。 希望對您有幫助。