替代全局CSS與純JavaScript

我有以下情況：替代全局CSS與純JavaScript

.my-nice-class { 
    max-width: 90%; 
    max-height: 90%; 
}

此代碼位於HTML頁中的第一<style>...</style>。我想重寫此全局CSS，在下面的例子中新的屬性值設置比如像：

.my-nice-class { 
    max-width: 40%; 
    max-height: 40%; 
}

我怎樣才能做到這一點與純JavaScript？

謝謝大家，

納米

來源

2017-02-10 Nano

嘗試類似來源：http：//www.w3schools.com/jsref/met_document_getelementsbyclassname.asp –

沒有javascript，你可以使用下面的代碼： - .my-nice-class {{0}} max-width：40％！important; 最大高度：40％！重要; } –

，只要你想通過修改該對象

document.getElementsByTagName("style")[0].innerHTML

相關DOM的修改樣式屬性修改CSS對象

document.getElementsByClassName("my-nice-class").style[0] = "max-width: 40%;max-height: 40%;"

注：您，如果您有多個對象使用一個for循環，而不是style[0]。

來源

2017-02-10 09:11:29 TRiNE

document.getElementsByClassName("my-nice-class").style.maxWidth= "40%"; 
document.getElementsByClassName("my-nice-class").style.maxHeight= "40%";

來源

2017-02-10 09:06:07

不，'''是無效的javascript，使用'maxHeight'和'maxWidth' – TryingToImprove

我正在驗證它！我貼出來後似乎很奇怪.. 謝謝@TryingToImprove！ –

對於針對此問題的可擴展解決方案，您還可以考慮在BEM實施中添加和刪除修改類。

//HTML 
<div class='my-nice-class my-nice-class--dimensions_A'></div>

，那麼Css：

CSS: 
.my-nice-class--dimensions_A { 
    max-width: 90%; 
    max-height: 90%; 
} 

.my-nice-class--dimensions_B { 
    max-width: 40%; 
    max-height: 40%; 
}

然後JavaScript可以添加和刪除該班

//Javascript 
var htmlEl = document.getElementsByClassName('my-nice-class')[0]; // in case you need the first element from the elements array 
htmlEl.classList.add("my-nice-class--dimensions_B"); 
htmlEl.classList.remove("my-nice-class--dimensions_A"); // cleaner but optional, since cascading character of css will render --B first anyway at this point

來源

2017-02-10 09:28:40 melvinv

document.getElementsByClassName("nav-questions").style.maxHeight="40%"; 
document.getElementsByClassName("nav-questions").style.maxWidth="40%";

這行代碼會自動覆蓋全局CSS的JS的優先級應用的CSS總是更高（即使是內聯的CSS）。

來源

2017-02-10 09:30:40 RRajani

替代全局CSS與純JavaScript

回答

相關問題