修改元素樣式

2021-08-16 15:21:47 字數 3258 閱讀 7672

一、修改元素樣式

通過給元素新增或移除類來改變元素樣式

1、jquery物件.addclass(class/function(index,currentclassname){}):jquery物件中的每乙個dom元素都可新增相同的指定乙個或多個類

2、jquery物件.removeclass(classfunction(index,currentclassname){}):jquery物件中的每乙個dom元素都可移除相同的指定乙個或多個類

3、jquery物件.hasclass(name):判斷jquery物件是否有指定類

例:if(li.hasclass('hiden red'))else):批量設定樣式

如:element.css();

3、jquery物件.css('樣式名',function(index,value(value為name的當前值)){})

4、jquery物件.css(name):獲取name值

5、jquery物件.css(name陣列):獲取name陣列值

三、獲取元素尺寸

1、jquery物件.width():獲取jquery物件指定元素的寬

2、jquery物件.height():獲取jquery物件指定元素的高

3、jquery物件.innerwidth():獲取jquery物件指定元素的寬加上內邊距

4、jquery物件.innerheight():獲取jquery物件指定元素的高加上內邊距

5、jquery物件.outerwidth():獲取jquery物件指定元素的寬加上內邊距加上邊框

6、jquery物件.outerheight():獲取jquery物件指定元素的高加上內邊距加上邊框

說明:5、6中若有引數true,則加上外邊距,若為false,不加

四、獲取或設定元素位置(例見設定元素位置.html)

1、jquery物件.offset():獲取到的元素位置相對於文件,返回乙個物件,只對可見元素有效

2、jquery物件.position():獲取到的元素位置相對于父元素,並且忽略外邊距,獲取由position設定的位置,返回乙個物件

3、jquery物件.scrolltop():獲取豎直滾動條的位置

4、jquery物件.scrollleft():獲取水平滾動條的位置

說明:若括號裡有值,則是設定滾動條的位置

1、jquery物件,html():獲取jquery物件的第乙個dom物件的html

2、jquery物件.text():獲取jquery物件的所有dom物件的文字

3、jquery物件,html(content):設定jquery物件的所有dom物件的html為content

4、jquery物件.text(content):設定jquery物件的所有dom物件的文字為content

五、移動或插入元素(例:插入或移動元素.html)

2、jquery物件.prepend(content(可為html字串,jquery物件,陣列)):將content插入到jquery物件中每乙個dom物件的內部內容的最前

3、jquery物件.after(content(可為html字串,jquery物件,陣列)):將content插入到jquery物件中每乙個dom物件的後面

4、jquery物件.before(content(可為html字串,jquery物件,陣列)):將content插入到jquery物件中每乙個dom物件的前面

說明:三者都是前者插入到element的某個位置,並且可指定多個插入位置

六、包裹元素(例見包裹元素.html)

1、jquery物件.wrap(content/jquery物件):用content包含jquery物件的dom元素,乙個content只包含乙個dom元素,直至所有都包含為止,是複製content,而不是移動dom元素

2、jquery物件.wrapall(content/jquery物件):用乙個content包含jquery物件的所有dom元素,是複製content,而不是移動dom元素

3、jquery物件.wrapinner(content/jquery物件):用乙個content包含jquery物件dom元素的文字內容

如:element.wrapinner($('div'));

結果為:

lorem ipsum dolor sit amet, consectetur adipisicing elit. incidunt, veritatis.

4、jquery物件.unwrap():取消包裹

七、移除元素(例見移除物件.html)

1、jquery物件.remove():移除所有匹配物件,只移除事件和資料(data),html中的內容被移除

2、jquery物件.detach():移除所有匹配物件,不移除事件和資料(data),html中的內容被移除

3、jquery物件.empty():移除所有匹配物件,只移除所有文字內容和子節點

八、複製和替換元素(例見複製和替換元素.html)

1、jquery物件.clone():若引數為(true):則進行深度複製,即自己和子元素的資料和事件都會進行複製;若引數為(true,false)則只複製自己的資料和事件;若引數為(false/無):則不複製自己和子元素的資料和事件

2、jquery物件.replacewith(content):用content替換jquery物件(所有匹配的元素)

3、content.replaceall(jquery物件):用content替換jquery物件,content為jquery物件

九、處理表單元素的值(例見處理表單元素的值.html)

1、jquery物件.val():獲取表單元素的值

/*var text=$("[name='text']");

console.log(text.val());*/

/*var radio=$("[name='radio']:checked");

console.log(radio.val());*/

"[name='select']").val());

"[name='multiselect']").val());

"[name='checkbox']:checked").val());//當選擇多個時,只會顯示第乙個的值

console.log($("[name='checkbox']:checked").map(function(index,docelement)).toarray());

2、jquery物件.val(值)設定元素的值

說明:其中radio、checkbox、下拉列表多選的括號中的值要為陣列(string或數字)

通過JS修改元素樣式

語法 元素,style.樣式名 樣式值 var box1 document.getelementbyid box1 box1.syle.width 100px 注意 如果css樣式名含有 如 background color,這種名稱在js中不合法,需要將樣式名修改為駝峰命名法,background...

jQuery 基礎 修改元素樣式

修改元素樣式 一 修改元素的類 addclass names removeclass names 給元素增加類 給元素刪除類 hasclass 方法 上述 的乙個簡便方法 toggleclass 二 直接修改元素的樣式 獲取或修改樣式 css name,value 方法 三 獲取或設定元素的尺寸 w...

DOM修改元素

修改元素 1 修改內容 functionfun 通過innertext屬性可讀取或設定標籤的內部文字 functionfun 也可以通過innerhtml屬性獲取或設定內部文字。兩者的區別 innerhtml會按照html規則解析文字,而innertext只是當作普通文字內容。2 修改樣式 a.st...