If you need to change the style of an element with JavaScript, it’s typically better to change a class name and have the CSS already on the page take effect and change the style. However, there are exceptions to every rule. For instance, you might want to programmatically change the pseudo-class (e.g. :hover
). You can’t do that through JavaScript for the same reason inline style=""
attributes can’t change pseudo classes.
You’ll need to inject a new <style>
element onto the page with the correct styles in it. Best to inject it at the bottom of the page so it overrides your CSS above it. Easy with jQuery:
function injectStyles(rule) {
var div = $("<div />", {
html: '­<style>' + rule + '</style>'
}).appendTo("body");
}
#Usage
injectStyles('a:hover { color: red; }');
- Tech Tricks answered 2 years ago
- You must login to post comments
Your Answer
Please login first to submit.