首頁 > 開發者 > JavaScript
標籤：
擷取記憶體中（正在渲染）的 style 的值（非內聯 style，obj.style 只能獲得內聯 style 的值），可以用 obj.currentStyle（低版本 IE 和 Opera 支援）和 window.getComputedStyle（IE9 以及 標準瀏覽器支援）來擷取。
window.getComputedStyle 的格式是 window.getComputedStyle(obj,虛擬元素)
第一個參數是要要擷取計算後的樣式的目標元素
第二個參數是期望的虛擬元素，如"after"，"first-letter"等，一般為 null
可以封裝擷取運行時的 style 對象的函數
function getStyle(obj, attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, null)[attr];}
註：這兩個方法擷取的對象是唯讀，要改樣式必須使用 obj.style。
【例】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width: 300px; height: 300px; background: blue; border-bottom: 1px solid black; } </style></head><body> <div id="div1" onclick="t();"></div></body><script> function getStyle(obj, attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, null)[attr]; } function t(){ var div = document.getElementById("div1"); div.style.width = parseInt(getStyle(div, "width")) + 5 + ‘px‘; div.style.height = parseInt(getStyle(div, "height")) + 5 + ‘px‘; div.style.borderBottomWidth = parseInt(getStyle(div, "borderBottomWidth")) + 1 + ‘px‘; }</script></html>
Javascript 筆記與總結（2-9）擷取運行時的 style 對象
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
