I have the following situation:
.my-nice-class {
max-width: 90%;
max-height: 90%;
}
This code lies in the first <style>...</style> in the html page.
I would like to override this global css, by setting for instance new properties values like in the example below:
.my-nice-class {
max-width: 40%;
max-height: 40%;
}
How can I accomplish this with pure Javascript?
Thank you all,
Nano
I have the following situation:
.my-nice-class {
max-width: 90%;
max-height: 90%;
}
This code lies in the first <style>...</style> in the html page.
I would like to override this global css, by setting for instance new properties values like in the example below:
.my-nice-class {
max-width: 40%;
max-height: 40%;
}
How can I accomplish this with pure Javascript?
Thank you all,
Nano
Share Improve this question asked Feb 10, 2017 at 9:02 NanoNano 8542 gold badges13 silver badges32 bronze badges 2- 1 Try something like <script>document.getElementsByClassName("my-nice-class").style.max-width = "40%";</script> Source: w3schools.com/jsref/met_document_getelementsbyclassname.asp – Adrian Bolonio Commented Feb 10, 2017 at 9:05
- Without javascript you can use below the code:- .my-nice-class { max-width: 40% !important; max-height: 40% !important; } – Vikas Pareek Commented Feb 10, 2017 at 9:28
7 Answers
Reset to default 10Modify the css as you want by modifying this object
document.getElementsByTagName("style")[0].innerHTML
OR
Modify style attribute of relevant DOM objects
document.getElementsByClassName("my-nice-class").style[0] = "max-width: 40%;max-height: 40%;"
NOTE: You have to use a for loop instead of style[0] if you have multiple objects.
For a scalable solution to this problem you could also consider to go for a BEM implementation where you will add and remove modification classes.
//HTML
<div class='my-nice-class my-nice-class--dimensions_A'></div>
Then the css:
CSS:
.my-nice-class--dimensions_A {
max-width: 90%;
max-height: 90%;
}
.my-nice-class--dimensions_B {
max-width: 40%;
max-height: 40%;
}
Then the javascript can add and remove this classes
//Javascript
var htmlEl = document.getElementsByClassName('my-nice-class')[0]; // in case you need the first element from the elements array
htmlEl.classList.add("my-nice-class--dimensions_B");
htmlEl.classList.remove("my-nice-class--dimensions_A"); // cleaner but optional, since cascading character of css will render --B first anyway at this point
document.getElementsByClassName("nav-questions").style.maxHeight="40%";
document.getElementsByClassName("nav-questions").style.maxWidth="40%";
This line of code automatically override the global css as priority of JS applied css are always higher(even then inline css).
It's kinda old, but none of those worked for me. Maybe the difference lies in EcmaScript standards, maybe in that I'm having multiple elements of provided CSS class.
Accessing the style variable under any of document.getElementsByClassName("class-one") or document.querySelectorAll('.class-one', '.class-two') results in undefined. To have a consistent function, there always should be an assumption of having multiple elements returned in getElementsByClassName or querySelectorAll, so the looping is necessary.
Aligning the proper answer to ES6 (maybe ES5) standards would be to loop through results of the function:
In case of the getElementsByClassName:
let elements = document.getElementsByClassName("class-one");
for(var i = 0; i < slides.length; i++) {
elements.item(i).style = "....";
}
In case of the querySelectorAll, the forEach can be used:
let elements = document.querySelectorAll('.class-one');
elements.forEach(element => {
element.style.color = "white";
element.style.height = "80%";
//accessing the single properties of style one by one is the preferred way
//than changing the whole `style` string
});
document.getElementsByClassName("my-nice-class").style.maxWidth= "40%";
document.getElementsByClassName("my-nice-class").style.maxHeight= "40%";
var cls = document.getElementsByClassName("footer01__pusher");
cls[0].style.height='132px';
cls[0].style.color='#ff0000';<html lang="en">
<head>
</head>
<body>
<div class="footer01__pusher" style="height: 165px;">Footer</div>
</body>
</html>style: CSSStyleDeclaration
0: "display"
1: "height"
additiveSymbols: ""
alignContent: ""
alignItems: ""
alignSelf: ""
alignmentBaseline: ""
all: ""
animation: ""
animationDelay: ""
animationDirection: ""
animationDuration: ""
animationFillMode: ""
animationIterationCount: ""
animationName: ""
animationPlayState: ""
animationTimingFunction: ""
appearance: ""
ascentOverride: ""
aspectRatio: ""
backdropFilter: ""
background: ""
backgroundAttachment: ""
backgroundBlendMode: ""
backgroundClip: ""
backgroundColor: ""
backgroundImage: ""
backgroundOrigin: ""
backgroundPosition: ""
backgroundPositionX: ""
backgroundPositionY: ""
backgroundRepeat: ""
backgroundRepeatX: ""
backgroundRepeatY: ""
backgroundSize: ""
baselineShift: ""
blockSize: ""
border: ""
borderBlock: ""
borderBlockColor: ""
borderBlockEnd: ""
borderBlockEndColor: ""
borderBlockEndStyle: ""
borderBlockEndWidth: ""
borderBlockStart: ""
borderBlockStartColor: ""
borderBlockStartStyle: ""
borderBlockStartWidth: ""
borderBlockStyle: ""
borderBlockWidth: ""
borderBottom: ""
borderBottomColor: ""
borderBottomLeftRadius: ""
borderBottomRightRadius: ""
borderBottomStyle: ""
borderBottomWidth: ""
borderCollapse: ""
borderColor: ""
borderEndEndRadius: ""
borderEndStartRadius: ""
borderImage: ""
borderImageOutset: ""
borderImageRepeat: ""
borderImageSlice: ""
borderImageSource: ""
borderImageWidth: ""
borderInline: ""
borderInlineColor: ""
borderInlineEnd: ""
borderInlineEndColor: ""
borderInlineEndStyle: ""
borderInlineEndWidth: ""
borderInlineStart: ""
borderInlineStartColor: ""
borderInlineStartStyle: ""
borderInlineStartWidth: ""
borderInlineStyle: ""
borderInlineWidth: ""
borderLeft: ""
borderLeftColor: ""
borderLeftStyle: ""
borderLeftWidth: ""
borderRadius: ""
borderRight: ""
borderRightColor: ""
borderRightStyle: ""
borderRightWidth: ""
borderSpacing: ""
borderStartEndRadius: ""
borderStartStartRadius: ""
borderStyle: ""
borderTop: ""
borderTopColor: ""
borderTopLeftRadius: ""
borderTopRightRadius: ""
borderTopStyle: ""
borderTopWidth: ""
borderWidth: ""
bottom: ""
boxShadow: ""
boxSizing: ""
breakAfter: ""
breakBefore: ""
breakInside: ""
bufferedRendering: ""
captionSide: ""
caretColor: ""
clear: ""
clip: ""
clipPath: ""
clipRule: ""
color: ""
colorInterpolation: ""
colorInterpolationFilters: ""
colorRendering: ""
columnCount: ""
columnFill: ""
columnGap: ""
columnRule: ""
columnRuleColor: ""
columnRuleStyle: ""
columnRuleWidth: ""
columnSpan: ""
columnWidth: ""
columns: ""
contain: ""
containIntrinsicSize: ""
content: ""
contentVisibility: ""
counterIncrement: ""
counterReset: ""
counterSet: ""
cssFloat: ""
cssText: "display: block; height: 2000px;"
cursor: ""
cx: ""
d: ""
descentOverride: ""
direction: ""
display: "block"
dominantBaseline: ""
emptyCells: ""
fallback: ""
fill: ""
fillOpacity: ""
fillRule: ""
filter: ""
flex: ""
flexBasis: ""
flexDirection: ""
flexFlow: ""
flexGrow: ""
flexShrink: ""
flexWrap: ""
float: ""
floodOpacity: ""
font: ""
fontDisplay: ""
fontFamily: ""
fontFeatureSettings: ""
fontKerning: ""
fontOpticalSizing: ""
fontSize: ""
fontStretch: ""
fontStyle: ""
fontVariant: ""
fontVariantCaps: ""
fontVariantEastAsian: ""
fontVariantLigatures: ""
fontVariantNumeric: ""
fontVariationSettings: ""
fontWeight: ""
gap: ""
grid: ""
gridArea: ""
gridAutoColumns: ""
gridAutoFlow: ""
gridAutoRows: ""
gridColumn: ""
gridColumnEnd: ""
gridColumnGap: ""
gridColumnStart: ""
gridGap: ""
gridRow: ""
gridRowEnd: ""
gridRowGap: ""
gridRowStart: ""
gridTemplate: ""
gridTemplateAreas: ""
gridTemplateColumns: ""
gridTemplateRows: ""
height: "2000px"
hyphens: ""
imageOrientation: ""
imageRendering: ""
To change style margin for your .my-nice-class global rule:
<style id=theStyleElement>
.my-nice-class {
max-width: 90%;
max-height: 90%;
}
</style>
theStyleElement.sheet.rules[0].style.maxWidth= "40%";
sadly I couldn't find how to set "!important" there in CSSStyleDeclaration without changing whole cssText