js創建樣式類,樣式的創建和使用

本文目錄一覽：

• 1、JavaScript如何創建一個類？
• 2、Javascript里的style怎樣追加
• 3、怎樣用JS來添加CSS樣式
• 4、JS創建的style樣式怎麼使用變數
• 5、用JavaScript動態建立或增加CSS樣式表的實現方法
• 6、筆記：JS設置CSS樣式的幾種方式

JavaScript如何創建一個類？

javascript是一個「基於對象」的編程語言，不是面向對象的編程語言。

你要知道javascript中的function定義的函數實際上就是Function對象實例。

例如：

function demo(x){

alert(x);

}

實際上等價於：

Function demo = new Function(“x”,”alert(x)”);

所以你如果想要用javascript來模擬面向對象編程（例如Java的類），那麼就可以用function來模擬Class，用function的原型prototype或者嵌套function來模擬類的方法或者屬性。下面給你一個簡單的例子：

//模擬學生類，可以帶參數，例如initName

function Student(initName){

var name = initName; //模擬學生類的屬性name

}

Student.prototype.printName = function(){ //定義Student類prototype中的printName函數

alert(this.name);

}

測試時可以這樣寫：

var student = new Student(“張三”); //創建一個「Student對象」，實際上是一個Function實例對象

student.printName(); //執行student對象的printName函數

Javascript里的style怎樣追加

思路

1、通過cssText的方式進行拼接。

2、通過設置class，累加設置class的方式進行。

代碼示例

1、第一種方式可以用下面函數，el表示dom節點，strCss表示要設置的樣式

function setStyle(el, strCss){

    function endsWith(str, suffix) {

        var l = str.length – suffix.length;

        return l = 0  str.indexOf(suffix, l) == l;

    }

    var sty = el.style,

        cssText = sty.cssText;

    if(!endsWith(cssText, ‘;’)){

        cssText += ‘;’;

    }

    sty.cssText = cssText + strCss;

}

2、第二種方式把樣式定義成class，element表示dom節點，value表示class名稱

function addClass(element,value){  

if(!element.className){            

element.className=value;

}else{

newClassName=element.className;

newClassName+=””;

newClassName+=value;

element.className=newClassName;

}

}

怎樣用JS來添加CSS樣式

例如改變背景色：

1234567div id=”changeColor”使用JS改變背景色/divscriptvar cc = document.getElementById(“changeColor”);cc.style.backgoundColor=”#000″; //將背景色改為黑色cc.style.fontSize=”20px”; // 將文字大小改為20px，等號右邊也可以寫為20+”px”cc.style.color=”#fff”; //將文字顏色改為白色/script

JS創建的style樣式怎麼使用變數

可以使用字元串拼接的方式，用setAttribute方法，將原有屬性（如果有的話），與想要設置的屬性變數拼接到一起。

節點.setAttribute(“style”,原有屬性+屬性名變數+”:”+ 屬性值+”;”);

用JavaScript動態建立或增加CSS樣式表的實現方法

1、簡單的方法，不管不顧，直接這樣就可以：

document.createStyleSheet().cssText

=

‘標籤{color:red;’

+

//

這個注釋只在當前JS中幫助理解，並不會寫入CSS中

‘width:300px;height:150px}’

+

‘.類名{……}’

+

‘#ID們{……}’

;

//完活。我喜歡分號這樣寫，和指令書寫的起始位置對齊比較好一點，尤其是後面有其它語句的時候。

2、完善一點的方法，防止重複添加，可以通過添加樣式表ID並對其判斷來實現：

if

(!document.styleSheets[‘要建立的樣式表ID如theforever’])

{

//先檢查要建立的樣式表ID是否存在，防止重複添加

var

ss

=

document.createStyleSheet();

ss.owningElement.id

=

‘要建立的樣式表ID如theforever’;

ss.cssText

=

‘標籤{display:inline-block;overflow:hidden;’

+

//

這個注釋只在當前JS中幫助理解，並不會寫入CSS中

‘text-align:left;width:300px;height:150px}’

+

‘.類名{……}’

+

‘#ID們{……}’

;

}

以上這篇用JavaScript動態建立或增加CSS樣式表的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

筆記：JS設置CSS樣式的幾種方式

1、直接更改，比如：

xID.style.display = “block”; // 更改display屬性，會覆蓋css中的定義。

xID.style.display = “”;      // 取消js更改display屬性，以css樣式為準。

這裡的xID，是通過id獲取的標籤。當然，也可能是通過tagName之類的獲取的標籤。

這種方式，簡單直接。但是要修改大量的樣式的時候，不適合。所以，我更推薦第二種方式。

2、更改類名

xID.className = “xx   yy”;

如果有多個類，就用空格隔開。前提，在樣式中要有已有類的定義。比如這裡的xx和yy類，在css中應該是寫好的。

這種方式把所有的樣式寫在了css文件中，適合更改較多的樣式以及炫酷的樣式。js就只做一件事情：改類。至於這個類會把標籤變成什麼樣子，交給css吧。

通過jquery也可以達到如上的效果：

$(“#xID”).css({

  fontSize:”12px”,

  display:”block”

});  // 直接更改樣式

$(“#xID”).addClass(“xx”);  // 增加刪除類

$(“#xID”).removeClass(“xx”);