[{"data":1,"prerenderedAt":150},["ShallowReactive",2],{"blog-\u002Fblog\u002Fscripted_css":3},{"id":4,"title":5,"body":6,"category":136,"cover":137,"csdn":137,"date":138,"description":5,"draft":139,"extension":140,"meta":141,"navigation":142,"path":143,"seo":144,"stem":145,"tags":146,"updated":137,"__hash__":149},"blog\u002Fblog\u002Fscripted_css.md","脚本化 css",{"type":7,"value":8,"toc":132},"minimark",[9,14,25,28,128],[10,11,13],"h2",{"id":12},"读写元素css属性-使用dom间接修改css","读写元素css属性 使用dom间接修改css",[15,16,21],"pre",{"className":17,"code":19,"language":20},[18],"language-text","dom.style.prop \u002F\u002F 读到的是行间的样式！\n               \u002F\u002F RW\n               \u002F\u002F bg-co  -->  bgCo     不允许-\n               \u002F\u002F float  -->  cssFloat float保留字\n               \u002F\u002F 值为字符串\n               \u002F\u002F 复合属性建议拆解：border\n\n\n查询计算样式(最终显示样式，包括默认值)\nwindow.getComputedStyle(ele, null)  \u002F\u002F R\n                                    \u002F\u002F 返回的计算样式的值都是绝对值  1em --> 16px\n                                    \u002F\u002F IE8 no\n                                    \u002F\u002F null 可获取伪元素\n\nele.currentStyle (IE独有)  \u002F\u002F R\n                           \u002F\u002F 返回 原封不动的值\n","text",[22,23,19],"code",{"__ignoreMap":24},"",[10,26,27],{"id":27},"封装兼容性方法",[15,29,33],{"className":30,"code":31,"language":32,"meta":24,"style":24},"language-javascript shiki shiki-themes github-light","function getStyle(ele, pro) {\n  if (window.getComputedStyle) {\n    return window.getComputedStyle(ele, null)[pro];\n  } else {\n    return ele.currentStyle[pro];\n  }\n}\n","javascript",[22,34,35,65,74,96,108,116,122],{"__ignoreMap":24},[36,37,40,44,48,52,56,59,62],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sD7c4","function",[36,45,47],{"class":46},"s7eDp"," getStyle",[36,49,51],{"class":50},"sgsFI","(",[36,53,55],{"class":54},"sqxcx","ele",[36,57,58],{"class":50},", ",[36,60,61],{"class":54},"pro",[36,63,64],{"class":50},") {\n",[36,66,68,71],{"class":38,"line":67},2,[36,69,70],{"class":42},"  if",[36,72,73],{"class":50}," (window.getComputedStyle) {\n",[36,75,77,80,83,86,89,93],{"class":38,"line":76},3,[36,78,79],{"class":42},"    return",[36,81,82],{"class":50}," window.",[36,84,85],{"class":46},"getComputedStyle",[36,87,88],{"class":50},"(ele, ",[36,90,92],{"class":91},"sYu0t","null",[36,94,95],{"class":50},")[pro];\n",[36,97,99,102,105],{"class":38,"line":98},4,[36,100,101],{"class":50},"  } ",[36,103,104],{"class":42},"else",[36,106,107],{"class":50}," {\n",[36,109,111,113],{"class":38,"line":110},5,[36,112,79],{"class":42},[36,114,115],{"class":50}," ele.currentStyle[pro];\n",[36,117,119],{"class":38,"line":118},6,[36,120,121],{"class":50},"  }\n",[36,123,125],{"class":38,"line":124},7,[36,126,127],{"class":50},"}\n",[129,130,131],"style",{},"html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":24,"searchDepth":67,"depth":67,"links":133},[134,135],{"id":12,"depth":67,"text":13},{"id":27,"depth":67,"text":27},"JavaScript",null,"2019-12-10",false,"md",{},true,"\u002Fblog\u002Fscripted_css",{"title":5,"description":5},"blog\u002Fscripted_css",[136,147,85,148],"CSSOM","样式操作","1jnV3HwoHV5Mgzlz72y9YOX8z915z1MG7Y2wlK7YKgA",1793010850659]