行內式樣式操作
//行內式屬性的獲取
let value =元素物件.style.屬性名;
//得到的值為string型別,如果要做算術運算需要轉型
//僅能得到行內式屬性的值，對於嵌入式、外聯式的值無法獲取
//屬性名需要注意如果在css中唯一個單詞則是原單詞，如果在css中為多個單詞則遵守駝峰命名法
元素物件.style.屬性名 = "value";
//為屬性賦值的內容也是string
js-dom動畫-小球水平往返
//////
background-color: brown;left: 100px;">
////
開始//
暫停//
let buttomlist = document.queryselectorall("button");
let divobj = document.queryselector("div");
let id;
//得到客戶區寬度
let userwidth =document.documentelement.clientwidth;
let flag = 1;
buttomlist[0].onclick = () =>
leftlength = (parseint(leftlength) + 50 * flag) + "px";
divobj.style.left =leftlength;
if (parseint(leftlength) < 50)
}, 100)
}}buttomlist[1].onclick = () =>
內嵌式、外聯式樣式操作
//外部操作樣式表
//1 cssstylesheet 物件物件集合
var stylesheetlist =document.stylesheets;
//cssstylesheet 物件表示乙個單獨的 css 樣式表。
//及·html中乙個style元素塊,或乙個連線的外部css檔案
//css 樣式表由 css 規則組成，可以通過 cssrule 物件操作每條規則
//cssstylesheet 物件允許您查詢、插入和刪除樣式表規則。
//2 獲取你要操作的樣式表物件
var styleobj = stylesheetlist[0];
//把單獨的樣式表提取出來，下標的數值與在文件中的書寫順序有關
//3 獲得style物件的樣式規則的集合(陣列)
var cssruleslist =styleobj.cssrules;
//乙個樣式表中包含乙個或多css規則(選擇器)，通過cssrules屬性將其全部提取出來
//4 獲得cssstylerule 樣式規則物件
var cssruleobj = cssruleslist[0];
//去除第一規則(選擇器)物件
//5 通過樣式規則物件的style物件對應的屬性
var w =cssruleobj.style.width;
//查詢提取出來的規則中的屬性值
var w = document.stylesheets[0].cssrules[0].style.width;
//這是上訴步驟的簡寫方式
//相容性
//cssrules 該屬性只在 谷歌 和 火狐有效 ie不支援
//rules 該屬性只有 ie支援 谷歌支援 但是 火狐不支援
var w = document.stylesheets[0].rules[0].style.width;
//使用rules提取出規則集合
var w = document.getelementsbytagname("div")[0].currentstyle.width;
//ie
//相容性寫法
var styleobjlist = document.stylesheets[0].cssrules
||document.stylesheets[0].rules;
var value = styleobjlist.style.width;
最終樣式操作
//最終樣式的讀取
var colorvalue =divobj.currentstyle.color;
//在ie中 每個物件（元素） 都有都有乙個currentstyle物件
var styleobj =window.getcomputedstyle(元素物件);
var colorvalue =window.getcomputedstyle(divobj).color;
//火狐中 getcomputedstyle(元素)
//操作最終樣式 只能是唯讀的。 divobj.currentstyle.color="blue" (不能寫，不能設定值);
//如果要設定值： 請用 元素物件.style.樣式屬性 = 指
//相容性寫法/**
* obj: 元素物件
* attrstring： 屬性名（字串）
**/function
getcssstyle(obj,attrstring)
else
}return document.all?obj.currentstyle[attrstring] : window.getcomputedstyle(obj)[attrstring];
//還可以使用三目運算子簡寫
js DOM模型操作
dom模型中的節點 元素節點 文字節點 屬性節點 例 私 dotnet小屋 1 a是元素節點 2 私 dotnet小屋 是文字節點 3 href 是屬性節點 dom節點的屬性 nodename string 節點名稱，根據節點的型別而定義 nodevalue string 節點的值，根據節點的型別而...
原生js dom操作
這裡說說一些原生js操作dom的方法 1，元素的獲取 getelementbyid getelementsbytagname getelementsbyclassname 這裡要注意這個getelementsbyclassname 在ie8以下是不相容的。相容寫法 function getbycla...
js dom基本操作
class wraper class one 老大 ppppp div class box 內容span href 鏈結a 段落p llp div class last 老弟div div 查 所有節點屬性都是元素物件下的屬性 使用節點 第一步獲取元素物件，再獲取節點 var box documen...