javascript - 覆盖CSS规则

原文 标签 javascript css overriding

我想在我的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");

最佳答案

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

关于javascript - 覆盖CSS规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15218110/

相关文章:

javascript - 基本的passport.js 注册功能失败,认为用户名已被占用

c++ - 覆盖虚成员函数时,为什么覆盖的函数总是变成虚函数?

kotlin - 如何避免Kotlin中的重复覆盖字段

javascript - 如何从 mustache 中的过滤器输出html

javascript - 在 Node.js 中验证 URL 查询字符串

javascript - 我无法设置由JavaScript填充的传统html表单下拉菜单的样式

php - PHP包含其他目录

javascript - 使用CSS的“可见性”属性使 knockout “可见”

jquery - 删除应用于特定类型元素的CSS

javascript - raphael.js - 将饼图转换为圆环图