-1

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");
4

4 に答える 4

2

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;
}
于 2013-03-05T07:52:17.190 に答える
1

getElementsByClassNameこのメソッドは、クロス ブラウザーと互換性がないことに注意してください。

jquery$(".ui-slider-handle ui-state-default ui-corner-all")セレクターを使用するか、独自のクロス ブラウザー コードを記述して、次のようなクラス名でノードをキャプチャできます。

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

于 2013-03-05T07:36:36.243 に答える
0

  1. 完全なクラス名がないため、クラス名セレクターは機能しません。これは正しいでしょう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 を割り当てて、getElementByIDclassname の代わりに呼び出すこともできます。

  2. あなたのループは少しずれています。p++ ではなく i++ である必要があります。

  3. 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-05T07:54:30.557 に答える
0

Document.querySelector の使用 ブラウザーの互換性: IE8+

alert(document.querySelectorAll(".ui-slider-handle.ui-state-default.ui-corner-all").length)
于 2013-03-05T08:16:03.043 に答える