0

如何在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 -->
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';

如果只想添加两个（left和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 回答