使用html/javascript代碼編輯外部CSS

如何更改放置在外部CSS文件中的某個值的值？所以基本上我的所有頁面都鏈接到一個css文件（它具有所有頁面的背景）。我試圖通過單擊一個按鈕來更改背景的值。這是我的代碼：使用html/javascript代碼編輯外部CSS

html ：

<button style="background:url(images/bg.png);" onclick="main()"><font color="#FFFFFF">Image</button> 
<button style="background-color:#000;" onclick="main()"><font color="#FFFFFF">Black</button> 
<button style="background-color:#030;" onclick="main()"><font color="#FFFFFF">Green</button> 
<button style="background-color:#006;" onclick="main()"><font color="#FFFFFF">Blue</button>

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    font-size: 24px; 
    background:url(images/bg.png); 
}

的Javascript：

<script type="text/javascript"> 
    function main(clicked){ 
     //Doesnt work 
     document.styleSheets[0].cssRules[0].style.background="#00FF00"; 
    } 
</script>

我怎麼能變化率T他通過點擊按鈕在CSS背景？

來源

2016-04-07 user3926730

你爲什麼不適用的元素在你的'CSS/CSS class'？你在調用'main（）'時沒有傳遞任何參數，但是你正在接受一個.. – Rayon

如何更改背景？觸發這個'document.body.style.background =「＃FF0000」' –

@Rayon哎呀我編輯過在發佈之前的代碼，按鈕有一個ID和按鈕ID作爲參數傳遞。它不需要tho .. – user3926730

你可以做這樣的事情

<button>Click me</button> 

button = document.getElementsByTagName('button'); 
button[0].onclick = function() { 
    document.body.style.background = "#00FF00"; 
}

demo fiddle

來源

2016-04-07 05:17:15 pradeep1991singh

如果我理解正確的話，你想改變背景樣式在CSS文件本身。

您無法使用Javascript更改存儲在服務器上的CSS文件。您將需要調用服務器功能來執行此操作。您是否使用任何服務器技術（如PHP或ASP.Net）？如果是這樣，請將按鈕單擊調用服務器上的一個函數來對CSS文件進行更改。

來源

2016-04-07 05:23:23 navigator

您可以使用CSS中的三個的方法。

通過添加.css文件和
通過具有<style>標籤。
最後用style屬性中的一個元素;

當我們用JavaScript處理元素的外觀時，我們通常會更改style屬性中的屬性。但是我們也可以改變<style>標籤內的東西，但我不會推薦這個。但我們永遠不能改變.css文件中的內容。即使<style>標記或style屬性中的更改僅在DOM中發生。

所以沒有辦法改變JavaScript的外部CSS。但你肯定可以改變style屬性中的CSS。運行下面的代碼。打開Chrome Inspector並選擇<body>標記。然後點擊按鈕，看看會發生什麼。

document.getElementById('changeBg').addEventListener('click', function() { 
 
    document.body.style = "background:red;" 
 
})

body { 
 
    background: blue; 
 
} 
 

 
button{ 
 
    margin:100px; 
 
}

<body> 
 
    <button id="changeBg">Click here to change Background</button> 
 
</body>

來源

2016-04-07 05:44:53 Roy

使用html/javascript代碼編輯外部CSS

回答

相關問題