Question

如何在Javascript中设置类？我将在我的网站中使用Addthis共享按钮。问题是我需要在我的网站上有两个不同的共享按钮样式，一个用于计算机浏览器，另一个用于移动设备。

我将使用以下脚本。我的问题是如何在javascript代码的条件中包含两个样式共享代码的代码行？如何将类放入javascript条件，因为共享代码具有CSS类。

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

Answer 1

您可以使用<div>元素的className property：

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

Answer 2

如果您只想动态添加CSS类，可以使用

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

如果您只想添加两个（left和top），还可以使用

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

虽然，我认为您的技术有问题，因为您只针对特定用户，但我建议您查看CSS媒体查询并更一般地设置样式。

如何在Javascript的条件语句中设置类？

2 个答案: