標籤：UNC bsp 瀏覽器 ie6 基本 相容性 性問題 etc 不相容
轉行學開發，代碼100天——2018-04-11
通過JavaScript擷取和修改HTML元素及CSS屬性是其一個準系統。對於CSS樣式通常有行內樣式，外部樣式，內嵌樣式之分。
如：
行內樣式：
<div id="box" style="width: 100px;height: 100px;background:#ccc"></div>
外部樣式：
<link rel="stylesheet" type="text/css" href="ccss.css">
內嵌樣式：
<style type="text/css">#div{width:100px;height:100px;background:red;}</style>
對於樣式的擷取也因其寫入方式不同而有所區別：
對於行內樣式的擷取，用 obj.style.屬性方式
如下面的一個擷取和修改行內樣式的案例：
<!DOCTYPE html><html><head> <title>JavaScript擷取樣式的方式</title> <script type="text/javascript"> //css樣式擷取和修改方法，兩個參數時，擷取；三個參數時修改 function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; }else { arguments[0].style[arguments[1]] = arguments[2]; } } //封裝擷取元素方法 function $(id){return document.getElementById(id);} window.onload =function () { var box = $(‘box‘); alert(css(box,"width"));//擷取 css(box,"width","200px");//設定屬性 } </script></head><body> <div id="box" style="width: 100px;height: 100px;background:#ccc"></div></body></html>
通過css函數技能擷取樣式也能修改樣式，其前提是基於擷取的HTML對象obj
function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; //擷取樣式 }else { arguments[0].style[arguments[1]] = arguments[2]; //修改樣式 } }
為了使用方便，提升函數的通用性，可以將該函數進一步最佳化，增加obj,name,value參數
//css樣式擷取和修改方法，兩個參數時，擷取；三個參數時修改 function css(obj,name,value){ // alert(arguments[0]); //arguments[0]=obj if (arguments.length==2) { return obj.style[name]; //擷取樣式 }else { obj.style[name] = value; //修改樣式 } }
非行間樣式：obj.style.屬性 方式並不適用與非行間樣式
“好東西一般不相容”
在用currentStyle() 與getComputedStyle() 擷取非行間樣式時需要考慮相容性問題，而瀏覽器的相容性問題一般都是通過if..else條件陳述式實現。
currentStyle() 相容IE6、7、8
getComputedStyle()不相容IE6、7、8
day26—JavaScript對CSS樣式的擷取和修改實踐
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
