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、清除、改變元素的特性基礎知識,一起來看看吧。
對元素某塊區域就行剪切
img{
clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left) 設置元素的形狀
auto 不應用任何剪裁
設置元素的堆疊順序
div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
z-index 值越大,所在的元素越靠前顯示
專門用來清除浮動
div{
clear:both
}
left 清除左側浮動
right 清除右側浮動
both 清除左右兩側浮動
none 允許浮動
互相調換元素之間的特性
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);調換至最后一行,運行正常
最可行的方法:添加節點的順序,由內到外(個人習慣);
*請認真填寫需求信息,我們會在24小時內與您取得聯系。