無法用！重要使用javascript覆蓋高度

Question

我有一個div.innerDiv，它已被分配一個height: 300px !important;在CSS文件中。我既不能更改現有的CSS文件，也不能添加新的類來覆蓋。由於樣式是!important，所以它可以作爲inline樣式被覆蓋，只有!important。但它不會產生預期的效果。

參照演示here。

UPDATE： 我只需要內嵌風格。

HTML：

<div> 
    <div class="innerDiv"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
     software like Aldus PageMaker including versions of Lorem Ipsum. 
    </div> 
</div> 

CSS：

.innerDiv { 
    height: 300px !important; 
    width: 150px; 
    border: 1px solid; 
} 

JS：

function overrideHeight() { 
    document.getElementsByClassName('innerDiv')[0].style.height = 400 + 'px !important'; 
} 

overrideHeight(); 

Answer 1

在我的瀏覽器（Safari瀏覽器的iPad），如果修改爲馬特的答案纔有效。

Answer 2

改變你的函數聲明THI s：

function overrideHeight() { 
    document.getElementsByClassName('innerDiv')[0].style = "height: 400px !important"; 
} 

這應該有效。請參閱this fiddle。

似乎!important關鍵字不允許包含在前面的語法中，即直接使用style.height。 style屬性的設置有效，但它沒有任何價值。

您可能已經知道它。但是，如果您忘記了，可以通過右鍵單擊它來檢查小提琴的結果，並修復某些工作不正常的問題。

Answer 3

另一種替代方法：

document.getElementsByClassName（ 'innerDiv'）[0] .style.setProperty（ 「高度」， 「400像素」， 「重要」）;

Answer 4

馬特的回答很完善，但這裏是另一個，它使用JS在該文件的頭以<style>標籤：

var styleTags = document.createElement('style'); 
 
styleTags.type = "text/css"; 
 
var styleText = document.createTextNode('.innerDiv { height: 400px !important; } '); 
 
styleTags.appendChild(styleText); 
 
document.getElementsByTagName('head')[0].appendChild(styleTags);

.innerDiv { 
 
    height: 300px !important; 
 
    width: 150px; 
 
    border: 1px solid; 
 
}

<div> 
 
    <div class="innerDiv"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
     software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div> 
 
</div>

又一個實現相同的結果的方式。

function overrideHeight() { 
document.getElementsByClassName('innerDiv')[0].style.cssText = "height: 400px !important"; 
} 

所以可能是值得關注的跨瀏覽器的怪癖：