mar*_*m97 5 html javascript css html5 css3
是否可以为CSS ID上的单个属性设置两个值,例如
身高:12em; 身高:12rem;
对于一个id？我知道可以用CSS做到这一点,但是我想通过javascript更改高度,并且在一个属性上都有两个值,因此'em'可以作为不支持'rem'的浏览器的后备.
例:
function updateHeight() {
var testElem = document.getElementById("testId");
testElem.style.height = "12em";
testElem.style.height = "12rem";
//testElem.style.height = "12em; 12rem;"; doesn't work, applies "12em"
}#testId {
height: 8em;
height: 8rem;
background-color: black;
color: white;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
</head>
<body>
<div id="testId">
BlaBla
</div>
<button onclick="updateHeight()">Bla</button>
</body>
</html>你可以使用一个类来代替
function updateHeight() {
var testElem = document.getElementById("testId");
testElem.classList.add('high');
}#testId {
height: 8em;
height: 8rem;
background-color: black;
color: white;
}
#testId.high { /* remember that ID is more specific than class */
height: 12em;
height: 12rem;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
</head>
<body>
<div id="testId">
BlaBla
</div>
<button onclick="updateHeight()">Bla</button>
</body>
</html>或者，如果该值是动态的，您可能必须插入样式标签才能支持 CSS 级联
function updateHeight() {
var value = 12; // or something dynamic
var styles = '#testId {height: '+value+'em; height: '+value+'rem;}';
var tag = document.createElement('style');
tag.innerHTML = styles;
document.querySelector('head').appendChild(tag);
}#testId {
height: 8em;
height: 8rem;
background-color: black;
color: white;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
</head>
<body>
<div id="testId">
BlaBla
</div>
<button onclick="updateHeight()">Bla</button>
</body>
</html>