js自定義css_建站知識:如何使用JS來自由切換css樣式表

1. javascript如何添加css類

JavaScript動態建立或增加CSS樣式表，參考如下：

1、簡單的方法：

js">document.createStyleSheet().cssText='標簽{color:red;'+
//這個注釋只在當前JS中幫助理解，並不會寫入CSS中
'width:300px;height:150px}'+
'.類名{……}'+
'#ID們{……}'

2、比較完美的方法，防止重復添加，通過添加樣式表ID並對其判斷來實現：

if(!document.styleSheets['要建立的樣式表ID如theforever']){//先檢查要建立的樣式表ID是否存在，防止重復添加
varss=document.createStyleSheet();
ss.owningElement.id='要建立的樣式表ID如theforever';
ss.cssText='標簽{display:inline-block;overflow:hidden;'+
//這個注釋只在當前JS中幫助理解，並不會寫入CSS中
'text-align:left;width:300px;height:150px}'+
'.類名{……}'+
'#ID們{……}'
;
}

2. JS修改CSS設置的樣式

語法：元素.style.樣式名=樣式值

注意：如果CSS的樣式名中含有-，這種名稱在JS中是不合法的，比如 background-color 。需要將這種樣式名修改為駝峰命名法：去掉-，然後將-後的第一個字母大寫，比如 backgroundColor

我們通過style屬性設置的樣式都是內聯樣式，而內聯樣式有較高的優先順序，所以通過JS修改的樣式往往會立即顯示
但是如果在樣式中寫了!important，則此時樣式會有最高的優先順序，即使通過JS也不能覆蓋該樣式，此時將會導致JS修改樣式失效
所以盡量不要為樣式添加!important

語法：元素.style.樣式名
通過style屬性設置和讀取的都是內聯樣式，無法讀取樣式表中的樣式

語法:元素.currentStyle.樣式名
如果當前元素沒有設置該樣式，則獲取它的默認值
例如： box1.currentStyle.width

這個方法是window的方法，可以直接使用需要兩個參數
第一個:要獲取樣式的元素
第二個:可以傳遞一個偽元素，一般都傳null

該方法會返回一個對象，對象中封裝了當前元素對應的樣式
可以通過對象﹒樣式名來讀取樣式

如果獲取的 樣式沒有設置 ，則會獲取到真實的值，而不是默認值
比如:沒有設置width，它不會獲取到auto，而是 一個長度

注意：通過currentStyle和getComputedstyle()讀取到的樣式都是只讀的，不能修改,如果要修改必須通過style屬性

參數：
obj 要獲取樣式的元素
name 要獲取的樣式名

3. 如何在JS中定義CSS

vardomObj=document.getElementById("tagId");
//使用domObj.style來設置css：
domObj.style.backgroundColor="#000";//對應style里background-color
domObj.style.fontSize="#000";//對應style里font-size
//如果對這個表不太清楚可以在w3c上查一下
//但是一般有個規律就是，首單版詞小寫「-」後面的權第一個字母大寫，如：font-size就是fontSize

如果是想更換標簽的class的話，可以使用

domObj.className="other_class";

4. 救命，如何用js給div標簽添加css屬性，當滑鼠事件發生的時候，譬如點擊某個元素

需要准備的抄材料分別有：電腦、襲html編輯器、瀏覽器。

1、首先，打開html編輯器，新建html文件，例如：index.html，編寫問題基礎代碼。

5. js css 自定義滑鼠的樣式

<html>
<body>
<p>請把滑鼠移動到單詞上，可以看到滑鼠指針發生變化：</p>
<spanstyle="cursor:auto">
Auto</span><br/>
<spanstyle="cursor:crosshair">
Crosshair</span><br/>
<spanstyle="cursor:default">
Default</span><br/>
<spanstyle="cursor:pointer">
Pointer</span><br/>
<spanstyle="cursor:move">
Move</span><br/>
<spanstyle="cursor:e-resize">
e-resize</span><br/>
<spanstyle="cursor:ne-resize">
ne-resize</span><br/>
<spanstyle="cursor:nw-resize">
nw-resize</span><br/>
<spanstyle="cursor:n-resize">
n-resize</span><br/>
<spanstyle="cursor:se-resize">
se-resize</span><br/>
<spanstyle="cursor:sw-resize">
sw-resize</span><br/>
<spanstyle="cursor:s-resize">
s-resize</span><br/>
<spanstyle="cursor:w-resize">
w-resize</span><br/>
<spanstyle="cursor:text">
text</span><br/>
<spanstyle="cursor:wait">
wait</span><br/>
<spanstyle="cursor:help">
help</span>
</body>
</html>

css3的代碼

設置url還可以自定義圖片

6. 建站知識:如何使用JS來自由切換css樣式表

詳細方法如下：第一步：在連接樣式表的元素里定義一個id,例如 <link href="1.css" rel="stylesheet" type="text/css" id="css"> 我定義的id是css。第二步：寫一個js函數，代碼如下： <script type="text/javascript"> function change（a）{ var css=document.getElementById（"css"）； if （a==1） css.setAttribute（"href","1.css"）； if （a==2） css.setAttribute（"href","2.css"）；}</script>這個函數的code可以放在頁面的任何地方。第三步：為改變頁面的樣式表的連接添加一個函數的觸發事件，代碼如下： <a href="#" onClick="change（1）">1.css</a> <a href="#" onClick="change（2）">2.css</a> 該效果在IE和FF下均測試通過，相信大家看完後因該非常明了，利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，好比年邁者可以選擇一個字體較大的樣式表。這里需要留意的兩點是：另外假如是改變整個頁面的樣式，你需要在樣式表文件里定義body的高度為100%

導航:首頁 > 編程語言 > js自定義css

js自定義css

與js自定義css相關的資料

友情鏈接