js基礎(樣式)

2022-07-18 06:03:07 字數 2998 閱讀 8627

修改樣式:

/*

* 通過js修改元素的樣式:

* 語法:元素.style.樣式名 = 樣式值

* * 注意:如果css的樣式名中含有-,

* 這種名稱在js中是不合法的比如background-color

* 需要將這種樣式名修改為駝峰命名法,

* 去掉-,然後將-後的字母大寫

* * 我們通過style屬性設定的樣式都是內聯樣式,

* 而內聯樣式有較高的優先順序,所以通過js修改的樣式往往會立即顯示

* * 但是如果在樣式中寫了!important,則此時樣式會有最高的優先順序,

* 即使通過js也不能覆蓋該樣式,此時將會導致js修改樣式失效

* 所以盡量不要為樣式新增!important

* *

* */box1.style.width = "300px";

box1.style.height = "300px";

box1.style.backgroundcolor = "yellow";

讀採樣式:

/*

* 語法:元素.style.樣式名

* * 通過style屬性設定和讀取的都是內聯樣式

* 無法讀採樣式表中的樣式

*/

/*

* 獲取元素的當前顯示的樣式

* 語法:元素.currentstyle.樣式名

* 它可以用來讀取當前元素正在顯示的樣式

* 如果當前元素沒有設定該樣式,則獲取它的預設值

* * currentstyle只有ie瀏覽器支援,其他的瀏覽器都不支援

*/alert(box1.currentstyle.width);

/*

* 在其他瀏覽器中可以使用

* getcomputedstyle()這個方法來獲取元素當前的樣式

* 這個方法是window的方法,可以直接使用

* 需要兩個引數

* 第乙個:要獲採樣式的元素

* 第二個:可以傳遞乙個偽元素,一般都傳null

* * 該方法會返回乙個物件,物件中封裝了當前元素對應的樣式

* 可以通過物件.樣式名來讀採樣式

* 如果獲取的樣式沒有設定,則會獲取到真實的值,而不是預設值

* 比如:沒有設定width,它不會獲取到auto,而是乙個長度

* * 但是該方法不支援ie8及以下的瀏覽器

* * 通過currentstyle和getcomputedstyle()讀取到的樣式都是唯讀的,

* 不能修改,如果要修改必須通過style屬性

*///

正常瀏覽器的方式

alert(getcomputedstyle(box1,null

).backgroundcolor);

//ie8的方式

alert(box1.currentstyle.backgroundcolor);

alert(getstyle(box1,"width"));

/*

* 定義乙個函式,用來獲取指定元素的當前的樣式

* 引數:

* obj 要獲採樣式的元素

* name 要獲取的樣式名

*/function getstyle(obj , name)

else

//return window.getcomputedstyle?getcomputedstyle(obj , null)[name]:obj.currentstyle[name];

}

#box1

/*

* clientwidth

* clientheight

* - 這兩個屬性可以獲取元素的可見寬度和高度

* - 這些屬性都是不帶px的,返回都是乙個數字,可以直接進行計算

* - 會獲取元素寬度和高度,包括內容區和內邊距

* - 這些屬性都是唯讀的,不能修改

*/alert(box1.clientwidth);

alert(box1.clientheight);

/*

* offsetwidth

* offsetheight

* - 獲取元素的整個的寬度和高度,包括內容區、內邊距和邊框

*/alert(box1.offsetwidth);

/** offsetparent

* - 可以用來獲取當前元素的定位父元素

* - 會獲取到離當前元素最近的開啟了定位的祖先元素

* 如果所有的祖先元素都沒有開啟定位,則返回body

*/var op =box1.offsetparent;

/** offsetleft

* - 當前元素相對於其定位父元素的水平偏移量

* offsettop

* - 當前元素相對於其定位父元素的垂直偏移量

*/alert(box1.offsetleft);

/** scrollwidth

* scrollheight

* - 可以獲取元素整個滾動區域的寬度和高度

*/alert(box4.clientheight);

alert(box4.scrollwidth);

js 滑鼠樣式

hand 是大家所熟悉的手型。crosshair 是十字型,就是小烏龜首頁所用的樣式。text 是平時滑鼠移動到文字上的樣式。wait 是等待的效果。default 是預設的那種效果。help 是帶問號的滑鼠樣式。e resize 是向右的箭頭。ne resize 是向右上方的箭頭。n resize...

js滑鼠樣式

hand 是大家所熟悉的手型。crosshair 是十字型,就是小烏龜首頁所用的樣式。text 是平時滑鼠移動到文字上的樣式。wait 是等待的效果。default 是預設的那種效果。help 是帶問號的滑鼠樣式。e resize 是向右的箭頭。ne resize 是向右上方的箭頭。n resize...

js滑鼠樣式

hand 是大家所熟悉的手型。crosshair 是十字型,就是小烏龜首頁所用的樣式。text 是平時滑鼠移動到文字上的樣式。wait 是等待的效果。default 是預設的那種效果。help 是帶問號的滑鼠樣式。e resize 是向右的箭頭。ne resize 是向右上方的箭頭。n resize...