Jump to content
abdu

How do we change/modify a style property within CSS body

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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}";

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×