覆蓋CSS規則

-1

我想在我的DOM樹中找到具有類名稱的節點：ui-slider-handle ui-state-default ui-corner-all。當我找到他們時，我想用我的CSS覆蓋他們的CSS。但我不能讓我的代碼工作：覆蓋CSS規則

var p = document.getElementsByClassName("ui-slider-handle ui-state-default ui-corner-all"); 
     for(var i=0; i<p.length; p++) { 
       p[i].style.width = 5 + "px !important"; 
       p[i].style.height = 5 + "px !important"; 
      } 




<div class="ui-slider ui-widget ui-widget-content ui-corner-all dhSliderDesktop ui-slider-vertical" style="visibility: visible;"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="bottom: 100%;"></a></div>

enter image description here

我的元素創建：

var slider = document.createElement("div"); 
     $(slider).slider({ 
      orientation: "vertical", 
      range: "min", 
     }); 

     if(isMobile) 
      $(slider).slider().addClass("dhSliderMobile"); 
     else 
      $(slider).slider().addClass("dhSliderDesktop");

來源

2013-03-05 Jacob

我們能不能請有一些HTML和多個腳本？順便說一句，當你可以做「5px！important」時，爲什麼你要做5 +「px！important」 – 2013-03-05 07:31:15

你使用jQuery嗎？從使用的類，我認爲你使用jQuery – 2013-03-05 07:50:12

：

您可以使用jQuery $(".ui-slider-handle ui-state-default ui-corner-all")選擇或編寫自己的跨瀏覽器的代碼以捕捉類名節點像這樣的試試

var slider = document.createElement("div"); 
$(slider).slider({ 
    orientation: "vertical", 
    range: "min", 
}); 

$('.ui-slider-handle', slider).addClass('myoverride');

然後添加CSS規則

.myoverride { 
    height: 5px !important; 
    width: 5px !important; 
}

來源

2013-03-05 07:52:17

這編譯沒有問題，但不起作用.... – Jacob 2013-03-05 07:54:45

@Jacob檢查更新 – 2013-03-05 09:15:42

不！還是行不通！它甚至不會循環！ – Jacob 2013-03-05 09:17:06

請注意：getElementsByClassName方法是不兼容的跨瀏覽器。如果您在使用jQuery

var slider = document.createElement("div"); 
$(slider).slider({ 
    orientation: "vertical", 
    range: "min", 
}); 

var items = $('.ui-slider-handle', slider); 
console.log('Test: ', items.length, items) 
console.log('HTML: ', slider.html()) 
$('.ui-slider-handle', slider).each(function(i, v){ 
    var style = $(this).attr('style'); 
    style += (style? ';' : '') + 'height: 5px !important; width: 5px !important;' 
    $(this).attr('style', style) 
})

另一種解決方案

http://javascript.ru/unsorted/top-10-functions#8-getelementsbyclass

來源

2013-03-05 07:36:36

你的類名選擇器將無法正常工作，因爲它不具有完全的類名。這將是正確的ui-slider ui-widget ui-widget-content ui-corner-all dhSliderDesktop ui-slider-vertical。但是，如果這是由腳本生成的，那麼我認爲你將不得不轉向jQuery以獲得更好的選擇。 Plus getElementsByClassName不是跨瀏覽器。

jQuery的版本選擇的：
```
$(".ui-slider-handle ui-state-default ui-corner-all") 
```
，或者你可以簡單地分配一個ID爲你的元素，並與getElementByID，而不是類名調用它。
你的循環有點不合適。它應該是i ++而不是p ++。
JavaScript中的style屬性無法接收「！important」。

通過修復您的腳本，這應該工作。

var p = document.getElementsByClassName("ui-slider ui-widget ui-widget-content ui-corner-all dhSliderDesktop ui-slider-vertical"); 

for(var i=0; i<p.length; i++) { 
    p[i].style.width = "5px"; 
    p[i].style.height = "5px"; 
    console.log(p[i].style); 
}

來源

2013-03-05 07:54:30

我有多個元素，所以我不能分配一個ID。 – Jacob 2013-03-05 09:05:24

然後使用它，如果它的工作。如果不是，請使用jQuery選擇器。 – 2013-03-05 09:13:08

會使用document.querySelector 瀏覽器兼容性：IE8 +

alert(document.querySelectorAll(".ui-slider-handle.ui-state-default.ui-corner-all").length)

來源

2013-03-05 08:16:03 zloctb

回答

相關問題