覆盖CSS规则

Question

我想在我的DOM树中找到具有类名ui-slider-handle ui-state-default ui-corner-all的节点。当我找到它们时，我想用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>

我的元素创建：

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

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

Answer 1

如果您使用的是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)
})

尝试

的另一种解决方案

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;
}

Answer 2

请注意getElementsByClassName方法与浏览器不兼容。

您可以使用jquery $(".ui-slider-handle ui-state-default ui-corner-all")选择器或编写自己的跨浏览器代码来按类名捕获节点，如下所示：

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

Answer 3

1. 您的类名选择器不起作用，因为它没有FULL类名。这是正确的ui-slider ui-widget ui-widget-content ui-corner-all dhSliderDesktop ui-slider-vertical。但如果这是由你的脚本生成的，那么我认为你将不得不转向jQuery以获得更好的选择器。加上getElementsByClassName不是跨浏览器。

   选择器的jQuery版本：

   $(".ui-slider-handle ui-state-default ui-corner-all")
   

   或者您只需为元素指定一个ID，然后使用getElementByID而不是类名称来调用它。

2. 你的循环有点偏。它应该是i ++而不是p ++。

3. javascript中的样式属性无法接收“！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);
}

Answer 4

使用Document.querySelector 浏览器兼容性：IE8 +

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