<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          如何使用JS操縱偽元素

          時間:?2017-12-18閱讀:?4918標簽:?偽類

          css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說,偽類和偽元素是用來修飾不在文檔樹中的部分,比如,一句話中的第一個字母,或者是列表中的第一個元素。 


          偽類 用于當已有元素處于的某個狀態時,為其添加對應的樣式,這個狀態是根據用戶行為而動態變化的。比如說,當用戶懸停在指定的元素時,我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似,可以為已有的元素添加樣式,但是它只有處于dom樹無法描述的狀態下才能為元素添加樣式,所以將其稱為偽類。


          偽元素 譬如::before和::after偽元素,用于在CSS渲染中向元素的頭部或尾部插入內容,它們不受文檔約束,也不影響文檔本身,只影響最終樣式。這些添加的內容不會出現在DOM中,僅僅是在CSS渲染層中加入。它不存在于文檔中,所以JS無法直接操作它。而jQuery的選擇器都是基于DOM元素的,因此也并不能直接操作偽元素。那該怎樣操作偽元素的樣式呢?為此總結整理一篇,以備查用。


          有哪些偽元素

          :first-letter:向文本的第一個字母添加特殊樣式。 

           :first-line: 向文本的首行添加特殊樣式。 

           :before:在元素之前添加內容。  

          :after:在元素之后添加內容。  

          ::placeholder:匹配占位符的文本,只有元素設置了placeholder屬性時,該偽元素才能生效。

          ::selection:CSS偽元素應用于文檔中被用戶高亮的部分(比如使用鼠標或其他選擇設備選中的部分)  

          ::backdrop(處于試驗階段):用于改變全屏模式下的背景顏色,全屏模式的默認顏色為黑色。該偽元素只支持雙冒號的形式  


          獲取偽元素的屬性值

          獲取偽元素的屬性值可以使用window.getComputedStyle()方法,獲取偽元素的CSS樣式聲明對象。然后利用getPropertyValue方法或直接使用鍵值訪問都可以獲取對應的屬性值。 

          語法: window.getComputedStyle(element[, pseudoElement]) 

          參數:element(Object):偽元素的所在的DOM元素;pseudoElement(String):偽元素類型。可選值有:”:after”、”:before”、”:first-line”、”:first-letter”、”:selection”、”:backdrop”;

          譬如示例如下: 

          // CSS代碼
          <style type="text/css">
          #jadeId:before {
              content: "hello nicejade!";
              display: block;
              width: 100px;
              height: 100px;
              background: red;
          }
          </style>
          
          // HTML代碼
          <div id="jadeId"></div>
          
          // JS代碼
          <script type="text/javascript">
          var myIdElement = document.getElementById("jadeId"),
              beforeStyle = window.getComputedStyle(myIdElement, ":before");
          console.log(beforeStyle); // [CSSStyleDeclaration Object]
          console.log(beforeStyle.width); // 100px
          console.log(beforeStyle.getPropertyValue("width")); // 100px
          console.log(beforeStyle.content); // "hello nicejade!"
          </script>

          對于如上還可以補充的是:  

           1.getPropertyValue()和直接使用鍵值訪問,都可以訪問CSSStyleDeclaration Object。它們兩者的區別有:

          對于float屬性,如果使用鍵值訪問,則不能直接使用getComputedStyle(element, null).float,而應該是cssFloat與styleFloat;
          直接使用鍵值訪問,則屬性的鍵需要使用駝峰寫法,如:style.backgroundColor;
          使用getPropertyValue()方法不可以駝峰書寫形式(不支持駝峰寫法),例如:style.getPropertyValue(“border-top-color”);
          getPropertyValue()方法在IE9+和其他現代瀏覽器中都支持;在IE6~8中,可以使用getAttribute()方法來代替;

          2.偽元素默認是”display: inline”。如果沒有定義display屬性,即使在CSS中顯式設置了width的屬性值為固定的大小如”100px”,但是最后獲取的width值仍是”auto”。這是因為行內元素不能自定義設置寬高。解決辦法是給偽元素修改display屬性為”block”、”inline-block”或其他。


          更改偽元素的樣式

          方法1. 更換class來實現偽元素屬性值的更改:

          // CSS代碼
          .red::before { content: "red"; color: red; }
          .green::before { content: "green"; color: green; }
          
          // HTML代碼
          <div class="red">內容內容內容內容</div>
          
          // jQuery代碼
          $(".red").removeClass('red').addClass('green');


          方法2. 使用CSSStyleSheet的insertRule來為偽元素修改樣式:

          document.styleSheets[0].addRule('.red::before','color: green'); // 支持IE
          
          document.styleSheets[0].insertRule('.red::before { color: green }', 0); // 支持非IE的現代瀏覽器


          方法3. 在<head>標簽中插入

          var style = document.createElement("style");
          document.head.appendChild(style); sheet = style.sheet;
          sheet.addRule('.red::before','color: green'); // 兼容IE瀏覽器
          
          heet.insertRule('.red::before { color: green }', 0); // 支持非IE的現代瀏覽器
          
          // 亦可以使用 JQuery:
          $('<style>.red::before{color:green}</style>').appendTo('head');


          修改偽元素的content的屬性值


          方法1. 使用CSSStyleSheet的insertRule來為偽元素修改樣式

          var latestContent = "新修改的內容";
          document.styleSheets[0].addRule('#jadeId::before','content: "' + latestContent + '"');  // 兼容IE瀏覽器
          
          document.styleSheets[0].insertRule('#jadeId::before { content: "' + latestContent + '" }', 0); // 支持非IE的現代瀏覽器


          方法2. 使用DOM元素的 data-* 屬性來更改content的值

          // CSS代碼
          .jadeId::before {
              content: attr(data-attr);
              color: red;
          }
          
          // HTML代碼
          <div class="jadeId" data-attr="jadeId">nciejade.io</div>
          
          // JacaScript代碼
          $('.jadeId').attr('data-attr', '新修改的內容');


          其他小建議

          偽元素的 content 屬性很強大,可以寫入各種字符串和部分多媒體文件。但是偽元素的內容只存在于CSS渲染樹中,并不存在于真實的DOM中。所以為了SEO優化,最好不要在偽元素中包含與文檔相關的內容。 

          修改偽元素的樣式,建議使用通過更換class來修改樣式的方法。因為其他兩種通過插入行內CSSStyleSheet的方式是在JavaScript中插入字符代碼,不利于樣式與控制分離;而且字符串拼接易出錯。 

          修改偽元素的content屬性的值,建議使用利用DOM的 data-\* 屬性來更改。  


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/255

          css的偽類有哪些?

          同一個標簽,根據其不同的種狀態,有不同的樣式。這就叫做“偽類”。偽類用冒號來表示。CSS 偽類用于向某些選擇器添加特殊的效果。

          css中:visited怎么不起作用?

          css定義超鏈接四個狀態也是有順序的,對于這4個偽類的設置,有一點需要特別注意,那就是它們的先后順序,要讓它們遵守一個順序原則,也就是link ~ visited ~ hover ~ active 。

          css偽類和偽元素

          偽類和偽元素,對于絕大多數同學來說,都是耳熟能詳的名字,但確實又有很多人搞不清楚它們之間的區別,以致于混淆概念。而當概念都混淆的時候,也往往意味著你不會經常使用它,怕出錯,怕用不好

          理解:before偽類搭配vertical-align:middle實現垂直居中的原理

          總所周知,Css如何實現元素垂直居中?已經是一個老生常談的問題了,這個問題目前已經有了許多解決方案,這些方案也都有各自適用的場景以及優缺點,大致如下:

          css中:focus偽類的使用

          當元素獲取到焦點之后,若該元素是一個有效的鏈接,則通過“Enter”鍵即可進入該鏈接地址;在頁面中也可以通過\\\"Tab\\\"鍵,遍歷所有的可獲得焦點的元素,使其獲得焦點;

          html中a標簽的4個偽類樣式

          在CSS超鏈接的屬性中,有四個連接方式:a:link a:hover a:visited a:acticve,之前在使用的時候一直是按照自認為的順序中去寫的,就是 L H V A的排序方式,然而有些時候卻發現并不起作用了

          中間文字,兩邊橫線的css3偽類的使用

          CSS偽類是用來添加一些選擇器的特殊效果。使用了css3的偽類,即相當于是在一個div中寫入文字,然后在它前后各加了一個div,然后進行位置及寬高的調節。代碼中只寫一個div,然后在css樣式中,對該div設置flex布局

          善用CSS偽類,不用JS也能做出選項卡功能

          本篇文章的技術給予選項卡UI另一種開發的選擇,Radio button的特性還有很多應用可以做(如Switcher),只要善用HTML表單元素與CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

          css否定偽類:not(s)

          :not(X)是CSS中的一個否定偽類(選擇器),并且接受一個簡單的選擇器作為參數。本質上,可以使任一其他選擇器(作為參數)。:not(選擇器)匹配傳遞參數選擇器未選擇的元素。傳遞參數或許不包括增加的選擇器或者偽元素選擇器。

          深入理解CSS偽類

          偽類經常與偽元素混淆,偽元素的效果類似于通過添加一個實際的元素才能達到,而偽類的效果類似于通過添加一個實際的類來達到。實際上css3為了區分兩者,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。本文將詳細介紹偽類的詳細知識

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网