css - How to setting a Class in a conditional statement of Javascript? - Stack Overflow

admin管理员组

文章数量:1332395

How to setting a Class in Javascript? I going to use Addthis sharing buttons in my website. The problem is that I need to have two different Styles of Sharing buttons in to my website, one to be shown in a puter browser and other for a mobile device.

I'm going to use the below script. My question is how to include the code lines of two Styles sharing codes in the conditions of the javascript code? How to put the classes into the javascript condition because the sharing codes have Classes of 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 puter 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_pact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis/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_pact"></a>
</div>
<script type="text/javascript" src="//s7.addthis/js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>
<!-- AddThis Button END -->

How to setting a Class in Javascript? I going to use Addthis sharing buttons in my website. The problem is that I need to have two different Styles of Sharing buttons in to my website, one to be shown in a puter browser and other for a mobile device.

I'm going to use the below script. My question is how to include the code lines of two Styles sharing codes in the conditions of the javascript code? How to put the classes into the javascript condition because the sharing codes have Classes of 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 puter 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_pact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis./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_pact"></a>
</div>
<script type="text/javascript" src="//s7.addthis./js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>
<!-- AddThis Button END -->

• javascript
• css

Share Improve this question Follow asked Mar 22, 2013 at 10:23 ultraInstinctultraInstinct 4,3331010 gold badges3737 silver badges5555 bronze badges 3

• api.jquery./addClass – gaynorvader Commented Mar 22, 2013 at 10:25
• @gaynorvader: OP does not use jQuery – Bergi Commented Mar 22, 2013 at 10:28
• May as well start though. – gaynorvader Commented Mar 22, 2013 at 10:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can use the className property of the <div> element:

<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_pact"></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./js/300/addthis_widget.js#pubid=ra-5149fd2b33068839"></script>

you can use classList instead of className. Your code should be something like:

(function addConditionalStyles () {
  const desiredElement = document.querySelector('#desiredElement');

  desiredElement.classList.toggle('mobile-only-class', detectMobile());
})();

in this example, the class .mobile-only-class will be applied only if the function detectMobile evaluates to truthy value.

If you only wish to add a CSS Class dynamically, you can use

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

If you want to only add the two (left and top), you can also use

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

Although, I believe your technique is faulty as you're only targeting specific users, I advice you to have a look at CSS Media Queries and set your styles more generally.

本文标签： cssHow to setting a Class in a conditional statement of JavascriptStack Overflow