jQuery 修改CSS偽元素屬性的方法

Query修改CSS偽元素屬性的方法

CSS偽元素(pseudo elements)不是DOM元素, 因此你無法直接選擇到它們。

假設有如下HTML代碼：

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

和CSS代碼：

.techbrood:before {
  width: 0;
}

現在你想在某個元素的click事件中動態的把techbrood:before的width屬性設置為100%,

有兩個方法, 一個是添加新的樣式：

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(注意該方法將影響所有的class為techbrood的元素)

另外一個方法是為該元素添加新類, 并通過設置新類的屬性來達到改變偽元素屬性的效果：

.techbrood.change:before{
  width: 100%;
}

jQuery代碼：

$('#td_pseudo').addClass("change");

言

上篇文章主要介紹了CSS樣式更改篇中的框模型、定位、浮動、溢出基礎知識，這篇文章主要分享CSS樣式更改中的裁剪、Z-Index、清除、改變元素的特性基礎知識，一起來看看吧。

1.裁剪Clip

對元素某塊區域就行剪切

img{
   clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left)  設置元素的形狀
auto 不應用任何剪裁

2.Z-Index

設置元素的堆疊順序

div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
z-index 值越大，所在的元素越靠前顯示

3.清除Clear

專門用來清除浮動

div{
  clear:both
}
left   清除左側浮動
right  清除右側浮動
both   清除左右兩側浮動
none   允許浮動

4.改變元素的特性Display

互相調換元素之間的特性

div{
    display:inline
}
none                元素不會被顯示。
block                元素將顯示為塊級元素，此元素前后會帶有換行符。
inline               元素將被顯示為內聯元素，元素前后沒有換行符。
inline-block         行內塊元素
list-item            元素會作為列表顯示。
run-in               元素會根據上下文作為塊級元素或內聯元素顯示。
table                元素會作為塊級表格來顯示，表格前后帶有換行符。
inline-table         元素會作為內聯表格來顯示，表格前后沒有換行符。
table-row-group       元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group    元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group    元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row             元素會作為一個表格行顯示（類似 <tr>）。
table-column-group    元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column          元素會作為一個單元格列顯示（類似 <col>）
table-cell            元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
table-caption         元素會作為一個表格標題顯示（類似 <caption>）

此時的塊級元素div就有了內聯元素的特性了。
參考文檔：W3C官方文檔（CSS篇）

總結

這篇文章主要介紹了CSS樣式更改篇中的裁剪、Z-Index、清除、改變元素的特性，希望讓大家對CSS樣式有個簡單的認識和了解。
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/

OM節點獲取

var oLi = document.getElementsByTagName("li");
var oLi = document.getElementById("cssLi");
var oLi = document.getElementsByName("myInput");

操作屬性：

document.getElementById(id).attribute=new value

實例

本例改變了 <img> 元素的 src 屬性：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

操作內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性和innerText（IE支持） outerText outerHTML

區別描述如下：

innerHTML 設置或獲取位于對象起始和結束標簽內的 HTML

outerHTML 設置或獲取對象及其內容的 HTML 形式

innerText 設置或獲取位于對象起始和結束標簽內的文本

outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

document.getElementById(id).innerHTML=new HTML

實例一

本例改變了 <p> 元素的內容：

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

實例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之間的區別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>設置或獲取位于對象起始和結束標簽內的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設置或獲取位于對象起始和結束標簽內的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設置或獲取對象及其內容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設置(包括標簽)或獲取(不包括標簽)對象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>

簡單的說innerHTML和outerHTML、innerText與outerText的不同之處在于：

　　1)、innerHTML與outerHTML在設置對象的內容時包含的HTML會被解析，而innerText與outerText則不會。

　　2)、在設置時，innerHTML與innerText僅設置標簽內的文本，而outerHTML與outerText設置包括標簽在內外的文本(多個標簽)。

特別說明：

　　innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，

　　如果要輸出不含HTML標簽的內容，可以使用innerHTML取得包含HTML標簽的內容后，再用正則表達式去除HTML標簽，

　　下面是一個簡單的符合W3C標準的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>

操作樣式

如需改變 HTML 元素的樣式，請使用這個語法：

document.getElementById(id).style.property=new style

CSS樣式的個別屬性采用馱峰式寫法(如：backgroundColor), 且不帶橫線。

document.body.style.backgroundColor="red";

如：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="類名"；
document.getElementById(id).className="類名1 類名2"；
document.getElementById(id).className+=" 類名3"；//注意要留有空格

<!DOCTYPE HTML>
<html>
<head>
<title>追加CSS類別</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy = document.getElementsByTagName("ul")[0];
oMy.className += " myUL2"; //追加CSS類,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

注意：追加CSS類,注意要留有空格;

ul標記已經設定了.myUL1類的樣式的情況下,oMy.className = "myUL1 myUL2"不等同于oMy.className += " myUL2",

oMy.className = "myUL1 myUL2"表現形式與oMy.className = "myUL2"一樣; 因此應當采用oMy.className += " myUl2";

改變 HTML 樣式

通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象。

下面的例子改變一個段落的 HTML 樣式：

如需向 HTML DOM 添加新元素，您首先必須創建該元素（元素節點），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

注意:經過測試證明,para.appendChild(node);調換至最后一行,運行正常

最可行的方法:添加節點的順序,由內到外(個人習慣);

在線咨詢

上一篇：高質量的網頁設計模板都開始收費了？小編精選了100套免費的給你
下一篇：網站建成以后要進行哪些維護？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商