How to change css href= using javascript?
Query for it like you would any other element using document.querySelector
or document.querySelectorAll
.
document.querySelector("link[href='u1.css']").href = "u2.css";
Alternatively, you could also access it via document.styleSheets
as well.
As an example:
// Change [href] on first stylesheet to u2.css
document.styleSheets[0].href = "u2.css";
Replacing css file on the fly (and apply the new style to the page)
You can create a new link, and replace the old one with the new one. If you put it in a function, you can reuse it wherever it's needed.
The Javascript:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
The HTML:
<html>
<head>
<title>Changing CSS</title>
<link rel="stylesheet" type="text/css" href="positive.css"/>
</head>
<body>
<a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a>
<a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
</body>
</html>
For simplicity, I used inline javascript. In production you would want to use unobtrusive event listeners.
How can you change the attached CSS file with Javascript?
Add an id to the link tag and use
<link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function styler(attr){
var href;
switch(attr){
case'1':href = "stylesheet1.css";break;
case'2':href = "stylesheet2.css";break;
case'3':href = "stylesheet3.css";break;
case'4':href = "stylesheet.css";break;
default:;break;
}
document.getElementById('myStyleSheet').href = href;
}
</script>
See this post
How to load up CSS files using Javascript?
Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute
unfortunately IE6 doesn't support it consistently.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.example/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
This example checks if the CSS was already added so it adds it only once.
Put that code into a JavaScript file, have the end-user simply include the JavaScript, and make sure the CSS path is absolute so it is loaded from your servers.
VanillaJS
Here is an example that uses plain JavaScript to inject a CSS link into the head
element based on the filename portion of the URL:
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );
</script>
Insert the code just before the closing head
tag and the CSS will be loaded before the page is rendered. Using an external JavaScript (.js
) file will cause a Flash of unstyled content (FOUC) to appear.
Styling a div's links in Javascript
the :link :visited are not true CSS elements, but part of the CSS rule, this means you need to edit the rule, change the rule or apply another class...
var css='#element a:link { color: #ff0000 }';
style=document.createElement('style');
if (style.styleSheet)
style.styleSheet.cssText=css;
else
style.appendChild(document.createTextNode(css));
document.getElementsByTagName('head')[0].appendChild(style);
Change link color of the current page with CSS
a:active
: when you click on the link and hold it (active!).a:visited
: when the link has already been visited.
If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -
.currentLink {
color: #640200;
background-color: #000000;
}
Add this new class only to the corresponding li
(link), either on server-side or on client-side (using JavaScript).
Related Topics
How to Add a Space After Ng-Repeat Element
Turn Off CSS3 Animation with Jquery
How to Detect State of CSS Transition via Js and Skip It
Iframe CSS Override for New Twitter Widget
How to Change <Body> Tag Style from Child Component
Detect Support for Background-Size: Cover
How to Slow Down Scrolling Speed with JavaScript
Fiill the Space Between Two Text Elements with Dots
JavaScript to Print Contents of Only Specific <Div>
Iframe Dynamic Height Width Change Based on Inner Content
Checking for Scrollheight of an Element Sometimes Returning 0
Leaflet + Polymer 2 Map Loading with Distorted Tile However Works with Non-Polymer Code
Css/Js for Circular Cropping of an Image
How to Prevent CSS Interference in an Injected Piece of HTML
How to Change the Design of the Textarea Resize Handle in CSS