JS操作CSS样式
?
一、樣式表(css)
使用樣式表可以更好的顯示W(wǎng)EB文檔，也可以結(jié)合javascript從而實(shí)現(xiàn)很好的控制樣式表。
樣式(css)與內(nèi)容(html)：
HTML是處理文檔結(jié)構(gòu)的，HTML可以實(shí)現(xiàn)如何把WEB文檔劃分為：標(biāo)題、段落、正文、列表等元素的。HTML沒有辦法很好的表現(xiàn)WEB文檔的外觀。HTML定義了文檔的結(jié)構(gòu)，這樣很好。現(xiàn)在只需要通過CSS控制頁面的外觀就可以了，而且不會(huì)改變HTML的內(nèi)容。
CSS其實(shí)，就是實(shí)現(xiàn)了對HTML的再次定義，如果某個(gè)瀏覽器不支持CSS，那該瀏覽器一樣可以瀏覽頁面，只不過是無法看到CSS定義的外觀而已。
如何定義CSS樣式：
通過<style>標(biāo)簽在HTML中定義樣式表，下面是一個(gè)最簡單樣式表的例子：
<style type=”text/css”>
H1{color:blue;}
</style>
應(yīng)該把<style>定義寫在<head>與</head>部分。
樣式表的規(guī)則：
<style>標(biāo)簽內(nèi)的所有元素都被稱為規(guī)則，規(guī)則是作用于特定的HTML元素之上的。規(guī)則中包含控制特定元素外觀的屬性與屬性值。
樣式表規(guī)則是由以下部分所組成的：
選擇器：為HTML標(biāo)簽，描述將有哪個(gè)HTML標(biāo)簽將會(huì)受到影響。
屬性名稱：HTML標(biāo)簽的特定屬性，既對該屬性進(jìn)行重新設(shè)定。
屬性值：每個(gè)屬性名稱的值。
這里要注意一點(diǎn)，選擇器可以為多個(gè)標(biāo)簽，也就是一組規(guī)則應(yīng)用于多個(gè)HTML標(biāo)簽。
HTML標(biāo)簽本身的屬性值，可以覆蓋CSS的設(shè)定。
定義指定元素的樣式：
按照以上的方法，可以定義指定類型標(biāo)簽的樣式，也就是說，該類標(biāo)簽都會(huì)受到影響。其實(shí)也可以定義指定標(biāo)簽的樣式，其他同類標(biāo)簽將不會(huì)受到影響。
? 可以在HTML標(biāo)簽內(nèi)部定義只應(yīng)用于該標(biāo)簽的樣式：
<h1 style=”color:red; text-align:center;”>This is Test</h1>
這被成為行內(nèi)樣式，因?yàn)樵摌邮绞嵌x在HTML標(biāo)簽內(nèi)部的。
? 利用HTML標(biāo)簽的ID屬性來定義樣式：
可以定義HTML標(biāo)簽的ID屬性，然后在樣式表定義中把規(guī)則應(yīng)用于ID為該屬性的所有標(biāo)簽就可以實(shí)現(xiàn)這個(gè)功能了。CSS使用符號 # 來表明將該規(guī)則應(yīng)用于特定ID的標(biāo)簽。比如：
<style type=”text/css”>
#intro{color:blue;}
</style>
臨時(shí)插上一句：筆者不推薦給多個(gè)標(biāo)簽起同一個(gè)ID，ID值應(yīng)該始終是唯一的。如果需要給多個(gè)標(biāo)簽使用一個(gè)樣式表的話，可以使用類，下面會(huì)講到的。
HTML標(biāo)簽的類屬性：
如果希望多個(gè)HTML標(biāo)簽使用同一樣式的話，可以給HTML標(biāo)簽定義class屬性。例如：
<p class=”smallprint”>This is Test</p>
以上<p>標(biāo)簽隸屬于smallprint類，在樣式表中給類定義規(guī)則的話，必須在類名稱之前加一個(gè)句點(diǎn)(.)以表明該規(guī)則將用于類標(biāo)簽。比如：
<style type=”text/css”>
.smallprint{color:blue;}
</style>
以上樣式表定義了應(yīng)用于smallprint類的樣式。
也可以把一個(gè)HTML標(biāo)簽添加到多個(gè)類中，比如：class=”smallprint bold ”。這樣定義在所有類上的樣式都將應(yīng)用到該標(biāo)簽。
CSS的屬性：
CSS支持多種屬性，包括：文本對齊、更改顏色、處理字體、設(shè)置邊框等。
使用外部樣式表文件：
當(dāng)然可以在HTML文檔中嵌入<style>標(biāo)簽以實(shí)現(xiàn)對HTML外觀的定義，但是卻使得HTML變地更加的長與復(fù)雜，后期維護(hù)也變的非常的麻煩。解決該問題的方案就是在HTML文檔中使用來自于外部獨(dú)立的CSS文件。更重要的是使用外部CSS文件，可以實(shí)現(xiàn)一個(gè)樣式表為多個(gè)HTML服務(wù)，從而節(jié)省了大量的代碼。而且可以根據(jù)需要臨時(shí)打開或關(guān)閉樣式表功能。
如何可以使用外部CSS文件？
我們可以通過在HTML文檔的<head>標(biāo)簽中通過<link>標(biāo)簽來引用外部CSS文件，語法如下：
<link rel=”stylesheet” type=”text/css” href=”style.css”>
使用獨(dú)立的CSS文件，很好的實(shí)現(xiàn)了3類文件的分離（HTML、CSS、JAVASCRIPT）。
編寫?yīng)毩⒌腃SS文件：
.css文件是簡單的文本文件，用普通的文本編輯器就可以編寫。.css文件保存的實(shí)際上就是一些CSS規(guī)則列表，當(dāng)然該文件不能夠包含HTML標(biāo)簽。其實(shí).css文件的內(nèi)容與HTML中的<style>與</style>的內(nèi)容是一樣的，只不過是寫在了一個(gè)獨(dú)立的文件中而已。比如下面的形式，就是一個(gè).css文件：
Body{color:blue;}
P{text-align:center;
Margin-left:20%;
Margin-right:20%;}
H1,h2,h3{color:red;}
如何利用javascript控制樣式：
利用javascript可以輕松的控制頁面上的樣式，就算沒有樣式表，也可以通過javascript控制頁面聲的任何元素的樣式。
通過修改style對象的屬性，可以修改任何一個(gè)對象的樣式。首先我們就是要查找到要修改樣式的對象，可以預(yù)先在對象中定義ID屬性，然后由getElementById()方法查找到該對象。比如：
<h1 id=”head1”>This is Text</h1>
Document.getElementById(“head1”).style.color=red;
?
轉(zhuǎn)載于:https://www.cnblogs.com/reganLi/p/3406593.html
總結(jié)
- 上一篇： 字符串过滤
- 下一篇： javascript ||用法