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