js獲取偽元素選擇器規定的內容程式碼例項
關於偽元素選擇器可以參閱CSS before/E::before一章節。
下面介紹一下如何利用js獲取偽元素選擇器定義的內容,這種需求在以前可能比較少。
但是隨著瀏覽器的進步,偽元素選擇器的實用會越來越廣泛。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .element:before{ content:'softwhy.com'; color:rgb(255,0,0); } </style> <script> window.onload=function(){ var odiv=document.getElementById("show"); var content = window.getComputedStyle(document.querySelector('.element'),':before') .getPropertyValue('content') odiv.innerHTML=content; } </script> </head> <body> <div class="element"></div> <div id="show"></div> </body> </html>
上面的程式碼實現了我們的要求,程式碼非常的簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).getComputedStyle()方法可以參閱getComputedStyle()和currentStyle一章節。
(2).querySelector()方法可以參閱querySelector()一章節。
相關文章
- js如何獲取css偽類選擇器樣式值程式碼例項JSCSS
- 設定獲取div元素中的文字內容程式碼例項
- javascript獲取li元素內容程式碼例項JavaScript
- css使用偽物件選擇器設定元素內容CSS物件
- js獲取點選單元格中的內容程式碼例項JS
- js獲取指定單元格的內容程式碼例項例項JS
- js禁止使用滑鼠選中元素內容程式碼例項JS
- js獲取元素的實際尺寸程式碼例項JS
- jquery實現獲取outerHTML內容程式碼例項jQueryHTML
- js獲取頁面中所有元素程式碼例項JS
- :eq()選擇器匹配多個元素程式碼例項
- js獲取選中文字程式碼例項JS
- jQuery獲取指定元素的父元素程式碼例項jQuery
- css獲取指定元素的兄弟元素程式碼例項CSS
- jquery獲取元素高度程式碼例項jQuery
- javascript獲取指定元素父元素程式碼例項JavaScript
- css相鄰選擇器設定li元素外邊距程式碼例項CSS
- js獲取選中文字值的例項程式碼JS
- 使用jquery獲取指定元素的子元素程式碼例項jQuery
- 如何動態刪除css的偽物件選擇器程式碼例項CSS物件
- jQuery獲取指定的li元素程式碼例項jQuery
- javascript獲取元素的順序程式碼例項JavaScript
- js內容左右滑動切換的選項卡程式碼例項JS
- js獲取元素在頁面中的座標程式碼例項JS
- 獲取指定元素下所有li元素程式碼例項
- jquery獲取同輩元素程式碼例項jQuery
- javascript獲取元素封裝程式碼例項JavaScript封裝
- javascript元素內容漸現效果程式碼例項JavaScript
- js實現的獲取選中文字程式碼例項JS
- jquery獲取元素的標籤tagName程式碼例項jQuery
- 獲取指定區間的li元素程式碼例項
- js獲取陣列中元素出現的次數程式碼例項JS陣列
- 獲取當前元素下一個元素程式碼例項
- jQuery獲取所有的li元素程式碼例項jQuery
- js獲取select選中項的值和文字內容JS
- CSS選擇器(6)——偽元素CSS
- Jquery如何獲取和設定元素內容?jQuery
- js實現的獲取指定元素的節點封裝程式碼例項JS封裝