Menu
Is it possible to set two Values for a single attribute on a CSS ID, e.g.
height: 12em; height: 12rem;
for a single id? I know it's possible to do this with CSS, but I want to change the height via javascript, and have both values on one attribute, so that 'em' functions as a fallback for Browsers not supporting 'rem'.
Example:
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>
775
Good News! You can layer multiple transform values, and yes, you can do it in one CSS property as well.
The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
You can use a class instead
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>Or if the value is dynamic, you'd probably have to insert a style tag to be able to support CSS cascading
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
