{"id":181,"date":"2014-04-09T11:13:00","date_gmt":"2014-04-09T03:13:00","guid":{"rendered":"http:\/\/gaigaiming.com\/?p=181"},"modified":"2014-04-09T11:13:00","modified_gmt":"2014-04-09T03:13:00","slug":"style%e3%80%81currentstyle%e3%80%81getcomputedstyle%e5%8c%ba%e5%88%ab%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/www.gaigaiming.com\/index.php\/2014\/04\/09\/style%e3%80%81currentstyle%e3%80%81getcomputedstyle%e5%8c%ba%e5%88%ab%e4%bb%8b%e7%bb%8d\/","title":{"rendered":"style\u3001currentStyle\u3001getComputedStyle\u533a\u522b\u4ecb\u7ecd"},"content":{"rendered":"
\n

\u6837\u5f0f\u8868\u6709\u4e09\u79cd\u65b9\u5f0f<\/strong><\/p>\n

      \u5185\u5d4c\u6837\u5f0f\uff08inline Style\uff09 \uff1a\u662f\u5199\u5728Tag\u91cc\u9762\u7684\uff0c\u5185\u5d4c\u6837\u5f0f\u53ea\u5bf9\u6240\u6709\u7684Tag\u6709\u6548\u3002<\/p>\n

     \u5185\u90e8\u6837\u5f0f\uff08internal Style Sheet\uff09\uff1a\u662f\u5199\u5728HTML\u7684<head><\/head>\u91cc\u9762\u7684\uff0c\u5185\u90e8\u6837\u5f0f\u53ea\u5bf9\u6240\u5728\u7684\u7f51\u9875\u6709\u6548\u3002<\/p>\n

      \u5916\u90e8\u6837\u5f0f\u8868\uff08External Style Sheet\uff09\uff1a\u5982\u679c\u5f88\u591a\u7f51\u9875\u9700\u8981\u7528\u5230\u540c\u6837\u7684\u6837\u5f0f(Styles)\uff0c\u5c06\u6837\u5f0f(Styles)\u5199\u5728\u4e00\u4e2a\u4ee5.css\u4e3a\u540e\u7f00\u7684CSS\u6587\u4ef6\u91cc\uff0c\u7136\u540e\u5728\u6bcf\u4e2a\u9700\u8981\u7528\u5230\u8fd9\u4e9b\u6837\u5f0f(Styles)\u7684\u7f51\u9875\u91cc\u5f15\u7528\u8fd9\u4e2aCSS\u6587\u4ef6\u3002<\/p>\n

     \u6700\u5e38\u7528\u7684\u662fstyle\u5c5e\u6027\uff0c\u5728JavaScript\u4e2d\uff0c\u901a\u8fc7document.getElementById(id).style.XXX\u5c31\u53ef\u4ee5\u83b7\u53d6\u5230XXX\u7684\u503c\uff0c\u4f46\u610f\u5916\u7684\u662f\uff0c\u8fd9\u6837\u505a\u53ea\u80fd\u53d6\u5230\u901a\u8fc7\u5185\u5d4c\u65b9\u5f0f\u8bbe\u7f6e\u7684\u6837\u5f0f\u503c\uff0c\u5373style\u5c5e\u6027\u91cc\u9762\u8bbe\u7f6e\u7684\u503c\u3002<\/p>\n

   \u89e3\u51b3\u65b9\u6848\uff1a\u5f15\u5165currentStyle,runtimeStyle,getComputedStyle<\/strong><\/p>\n

   style                \u6807\u51c6\u7684\u6837\u5f0f\uff01\u53ef\u80fd\u662f\u7531style\u5c5e\u6027\u6307\u5b9a\u7684\uff01
     runtimeStyle    \u8fd0\u884c\u65f6\u7684\u6837\u5f0f\uff01\u5982\u679c\u4e0estyle\u7684\u5c5e\u6027\u91cd\u53e0\uff0c\u5c06\u8986\u76d6style\u7684\u5c5e\u6027\uff01
    currentStyle   \u6307 style \u548c runtimeStyle \u7684\u7ed3\u5408\uff01<\/p>\n

    \u901a\u8fc7currentStyle\u5c31\u53ef\u4ee5\u83b7\u53d6\u5230\u901a\u8fc7\u5185\u8054\u6216\u5916\u90e8\u5f15\u7528\u7684CSS\u6837\u5f0f\u7684\u503c\u4e86\uff08\u4ec5\u9650IE<\/strong>\uff09<\/p>\n

   \u5982\uff1adocument.getElementById("test").currentStyle.top<\/p>\n

   \u8981\u517c\u5bb9FF\uff0c\u5c31\u5f97\u9700\u8981getComputedStyle<\/strong> \u51fa\u9a6c\u4e86<\/p>\n

   \u6ce8\u610f:getComputedStyle\u662ffirefox\u4e2d\u7684\uff0c<\/p>\n

           currentStyle\u662fie\u4e2d\u7684.<\/p>\n

\u6bd4\u5982\u8bf4<\/p>\n

<style><\/p>\n

     #mydiv {<\/p>\n

            width : 300px;<\/p>\n

     }<\/p>\n

<\/styke><\/p>\n

\u5219:<\/p>\n

var mydiv = document.getElementById(‘mydiv’);<\/p>\n

if(mydiv.currentStyle) {<\/p>\n

      var width = mydiv.currentStyle[‘width’];<\/p>\n

      alert(‘ie:’ + width);<\/p>\n

} else if(window.getComputedStyle) {<\/p>\n

      var width = window.getComputedStyle(mydiv , null)[‘width’];<\/p>\n

      alert(‘firefox:’ + width);<\/p>\n

}<\/p>\n

\u53e6\u5916\u5728FF\u4e0b\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4e0b\u9762\u7684\u65b9\u5f0f\u83b7\u53d6<\/p>\n

document.defaultView.getComputedStyle(mydiv,null).width<\/p>\n

window.getComputedStyle(mydiv , null).width<\/p>\n<\/p><\/div>\n

\u672c\u6587\u4f7f\u7528Blog_Backup\u672a\u6ce8\u518c\u7248\u672c\u5bfc\u51fa\uff0c\u8bf7\u5230soft.pt42.com\u6ce8\u518c\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

\u6837\u5f0f\u8868\u6709\u4e09\u79cd\u65b9\u5f0f       \u5185\u5d4c\u6837\u5f0f\uff08inline Sty […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-181","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":0,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gaigaiming.com\/index.php\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}