0

Javascriptでクラスを設定する方法は？WebサイトでAddthis共有ボタンを使用します。問題は、Webサイトに2つの異なるスタイルの共有ボタンが必要なことです。1つはコンピューターのブラウザーに表示され、もう1つはモバイルデバイスに表示されます。

以下のスクリプトを使用します。私の質問は、JavaScriptコードの条件にコードを共有する2つのスタイルのコード行を含める方法です。共有コードにはCSSのクラスがあるため、クラスをjavascript条件に入れる方法。

    <script >
    function detectmob() { 
     if( navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/webOS/i)
     || navigator.userAgent.match(/iPhone/i)
     || navigator.userAgent.match(/iPad/i)
     || navigator.userAgent.match(/iPod/i)
     || navigator.userAgent.match(/BlackBerry/i)
     || navigator.userAgent.match(/Windows Phone/i)
     ){
        return true;  // Style for mobile devices
      }

     else {
        return false;  // Style for computer devices
      }
    }

//Style for mobile devices
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>
<!-- AddThis Button END -->

// Style for Computer
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>
<!-- AddThis Button END -->
4

2 に答える 2

1

要素のclassNameプロパティを使用できます。<div>

<div id="addthis-box" class="addthis_toolbox addthis_32x32_style">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script>
    var box = document.getElementById("addthis-box");
    if (detectmob()) {
        box.className += " addthis_default_style";
    } else {
        box.className += " addthis_floating_style";
        box.style.left = "50px";
        box.style.top = "50px";
    }
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>
于 2013-03-22T10:31:50.543 に答える
0

CSSクラスを動的に追加するだけの場合は、次を使用できます。

document.getElementById('the-element-s-id').className += 'the-desired-class';

left2つ（と）だけを追加したい場合はtop、次を使用することもできます

e = document.getElementById('here-goes-the-element-s-id');
e.style.left = '50px';
e.style.top = '50px';

特定のユーザーのみを対象としているため、テクニックに問題があると思いますが、CSSメディアクエリを確認して、より一般的にスタイルを設定することをお勧めします。

于 2013-03-22T10:30:02.567 に答える