js外部樣式和style屬性的添加移除


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

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

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屬性。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM