覆盖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

覆盖CSS规则

回答

相关问题