js外部樣式和style屬性的新增移除

2022-05-06 18:36:09 字數 1324 閱讀 9363

在頁面中,往往乙個控制項的外部樣式或者內部樣式往往不只乙個,而我們只需操作其中乙個樣式該怎麼辦呢?

最開始我也不知道該怎麼做,就用了最原始的方法,替換原有的樣式為新的樣式,這樣每次都要獲取原樣式,找通用正則,太麻煩了,後來才發覺還有這麼簡單的方法,廢話不多說了。

1.外部樣式class的新增刪除

html:

document.getelemntbyid("元素id").addclass("樣式類名");

document.getelemntbyid("元素id").removeclass("樣式類名");

jquery:

$("#元素id").addclass("樣式類名");         //追加樣式

$("#元素id").removeclass("樣式類名");

$("#元素id").toggleclass("樣式類名");    //新增刪除切換樣式

$("#元素id").css(屬性名,屬性值);          //追加樣式屬性

2.內部樣式style的增加刪除

使用js操作style屬性的寫法是有一定規律的,下面以乙個style屬性為例:style="margin:1px;border-bottom:1px soild #ccc;float:right;"

a.對於沒有中劃線的css屬性一般直接使用style.屬性名即可訪問。如:obj.style.margin = "2px";//修改margin屬性

b.對於含有中劃線的css屬性,將每個中劃線去點並將每個中劃線後的第乙個字母大寫,通過style.改寫後的屬性名訪問。如:obj.style.borderbottom = "";//清空border-bottom屬性

c.float屬性比較特殊,ie:obj.style.stylefloat,其他瀏覽器:obj.style.cssfloat.

獲取所有的style屬性值:obj.style.csstext;

刪除屬性:obj.style.屬性名 = "";

或者使用jquery的css()方法。如:

$("#id").css("width"):獲取style中width屬性的值

$("#id").css("width","100px"):設定style中width屬性的值為100px。

$("#id").css("width",""):去掉style中width屬性。

js外部樣式和style屬性的新增移除

最開始我也不知道該怎麼做,就用了最原始的方法,替換原有的樣式為新的樣式,這樣每次都要獲取原樣式,找通用正則,太麻煩了,後來才發覺還有這麼簡單的方法,廢話不多說了。html document.getelemntbyid 元素id addclass 樣式類名 document.getelemntbyid...

JS操作屬性和樣式

js操作屬性 aaa.getattribute 屬性名 取出aaa這個dom物件的屬性名中的屬性值 aaa.removeattribute 屬性名 移除該屬性 aaa.setattribute 屬性名 值 新增 修改此屬性 window.settimeout b 3000 等待3秒,執行b這個方法,...

外部樣式表宣告的樣式並不會進入style物件

在網頁設計當中,我們注重網頁的行為 js 結構 htlm 樣式 css 分離開 內聯樣式表或者內部樣式表宣告的樣式資訊都會進入style物件。我們可以測試一下 但是我們的外部樣式表,也就是通過link標籤鏈結進來的style樣式,並沒有進入style這個物件裡面,所以我們在取外部樣式表裡面對應元素的...