如何在Javascript的條件語句中設置一個類？

如何在Javascript中設置類？我將在我的網站中使用Addthis共享按鈕。問題是我需要在我的網站上有兩種不同的共享樣式按鈕，一種用於在電腦瀏覽器中顯示，另一種用於移動設備。如何在Javascript的條件語句中設置一個類？

我打算使用下面的腳本。我的問題是如何在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 -->

來源

2013-03-22 ebertbm

http://api.jquery.com/addClass/ – gaynorvader 2013-03-22 10:25:52

@gaynorvader：OP不使用jQuery – Bergi 2013-03-22 10:28:03

不妨開始雖然。 – gaynorvader 2013-03-22 10:28:39

您可以使用該<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>

來源

2013-03-22 10:31:50 Bergi

謝謝Bergi。但在兩種環境（手機和電腦）中都出現了兩個共享按鈕的混合。條件是採取班級的所有陳述。請查看頁面：http：//www.expo-estudiante.com/colombia/index2.asp – ebertbm 2013-03-22 10:53:04

如果你只是想動態添加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 Media Queries並更一般地設置你的樣式。

來源

2013-03-22 10:30:02

如何在Javascript的條件語句中設置一個類？

回答

相關問題