H5_0010：JS动态创建CSS，并向CSS中传入参数值

1，在html中定义style

2，js中创建css，并添加进入head标签style中

!function(e, t, i) {
n.classList && n.classList.add("fill-mode-" + e);
var s = "@media screen and (min-aspect-ratio: " + t + "/" + i + ") {";
s += " #application-canvas.fill-mode-KEEP_ASPECT {",
s += " width: auto;",
s += " height: 100%;",
s += " margin: 0 auto;",
s += " }",
s += "}",
document.head.querySelector && (document.head.querySelector("style").innerHTML += s)
}(i._fillMode, i._width, i._height)

这是自动执行的方法，括号中传入的参数值

 

3，动态创建CSS

t = [

"body {",
" height: 100%;",
" width: 100%;",
" overflow: hidden;",
" margin: 0;",
" padding: 0;",
" font-size:0",
"}",

"html,body{background-color:transparent;}",
".start-wrap {",
" top: 60.5%;",
"}",

"}"
].join("\n"),

(i = document.createElement("style")).type = "text/css", i.styleSheet ? i.styleSheet.cssText = t : i.appendChild(
document.createTextNode(t)),
document.head.appendChild(i)

 

4， 动态修改css

t.style.cssText="width:250px; height: 100px; z-index: 10;";