abdu Posted September 25, 2018 Share Posted September 25, 2018 How do we change/modify a style property within CSS body, ie. not in inline style, either CSS in style tag body or in external file, by using JavaScript? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2018 Share Posted September 25, 2018 You create a class that will give you what you want body.mystyle {background-color: red;} then add/remove that class name to the body element using JavaScript. Link to comment Share on other sites More sharing options...
iwato Posted September 25, 2018 Share Posted September 25, 2018 Do you use jQuery? $("body").css("background-color", "red"); and if you want to change more properties create an object, but notice how the formatting of each property-value pair changes. $("body").css({"background-color": "red", "font-size": "1.2em"}); Roddy Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2018 Share Posted September 25, 2018 It would be very difficult to alter css rules specifically in a css style tag between <head>...</head> tag and impossible to alter external css file using JavaScript, and if the element you where targeting already had inline styling, that is the higher precedence over styling elsewhere (style tag or css external file). If the element has a inline style you wish to override, you would need to overwrite the current inline styling properties. If the element has no inline styling, and you don't wont to use inline styling, which is what I gathered from your first post, you would have to add the styling you require using a class name within the css style tag, or external css file, then use JavaScript/jQuery to add the class name to the element you want to target. Link to comment Share on other sites More sharing options...
smus Posted October 8, 2018 Share Posted October 8, 2018 dsonesuk, you are right, adding a class is a reasonable solution. However, as far as I can get from a topic description, the author wants to address a <style> tag directly. Hypotheticaly, it must look like this: let style = document.getElementsByTagName("style")[0]; style.innerHTML = style.innerHTML + "{any selector we want to add here}"; Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2018 Share Posted October 8, 2018 That's impractical, It was also mentioned adjusting a css external file, how would that work? what if the op wanted to revert back, append with the same solution, or string replace? where as, all I would have to do is change class name or remove. Link to comment Share on other sites More sharing options...
smus Posted October 8, 2018 Share Posted October 8, 2018 1 hour ago, dsonesuk said: That's impractical, It was also mentioned adjusting a css external file, how would that work? what if the op wanted to revert back, append with the same solution, or string replace? where as, all I would have to do is change class name or remove. agree with you, adding a class is the best solution in this case Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now