This question already has answers here:
Changing the href of a link tag using JavaScript
(2 answers)
Closed 7 years ago.
I have the following HEAD tag
<head>
<title>Test</title>
<link id="css1" href="demo.css" rel="stylesheet" type="text/css">
</head>
What I want to be able to in Javascript is somehow
document.head.children["css1"].href = "demo2.css";
Any ideas, I would like to be able to the change by id as there might be more tags in the head
In a script tag anywhere after that link, you can indeed update its href:
document.getElementById("css1").href = "demo2.css";
Normally, it's best to put your script tags at the end, just before the closing </body> tag. In your case, since you're changing CSS, to avoid having the previous styling "flashing" at the user, you might want it higher up so it's handled sooner, though.
This page shows you how to do that:
DEMO
javascript
function swapStyleSheet(sheet) {
document.getElementById('pagestyle').setAttribute('href', sheet);
}
html
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<button onclick="swapStyleSheet('1.css')">1 Style Sheet</button>
<button onclick="swapStyleSheet('2.css')">2 Style Sheet</button>
<button onclick="swapStyleSheet('2.css')">3 Style Sheet</button>
Related
This question already has answers here:
Programmatically load CSS using JS
(3 answers)
Closed 19 days ago.
I have created a webpage using the InnerHtml function in JavaScript. I now want to import some icons into this JavaScript file.
These icons have come from an external site, which contains a CDN link.
How could I do this?
I have tried to write the CDN link inside the tags of the InnerHTML function, as well as in the HTML part of the InnerHTML function. However, neither way imports the icons correctly.
You can use <ion-icon></ion-icon> and specify the name in it like
<ion-icon name="home-outline" class="home-icon"></ion-icon>
Note: It works with ion-icons package only.
Simple example:
* {
box-sizing: border-box;
}
<html>
<head>
</head>
<body>
<div class="container">
<ion-icon name="home-outline" class="home-icon"></ion-icon>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js">
</script>
</body>
</html>
This question already has answers here:
Use CSS to hide contents on print
(5 answers)
Closed 4 years ago.
I know this question has an Already been asked but I am using Different and Short Approach.
I have print button for printing Invoice in my web page
<button class="print" onclick="window.print()">Print</button>
The Problem is it prints the whole document including print button
is their any way to exclude print button from printing in document
Checkout this Link : https://www.thoughtco.com/how-to-add-a-print-button-4072006
I just have to add
<link rel="stylesheet" type="text/css" media="print" href="print.css">
in my head part of the page
print.css is as below
body {visibility:hidden;}
.print {visibility:visible;}
Also we had to assign class="print" to to html element which we want to print
Thanks to #Clay
change onclick function like this
<button class="print" onclick="this.style.visibility='hidden';window.print();">Print</button>
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
I was copying the code from this website http://codepen.io/githiro/pen/ICfFE to use for my website and i've got an error. The very first function starts with $, $(function(){ however when I put this through and open it up on google it gets an error saying $ is undefined. I should also point out that I have called the jquery.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="script.js"></script>
<script src="jquery-2.2.2.js"></script>
<title> What Instrument are you? </title>
</head>
How would I fix this?
Thanks for your help!
You need to add jQuery to your page before your main script body.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
open it up on google it gets an error saying $ is undefined
This generally means that your jQuery reference is missing. Ensure that you include it prior to the <script> tag that contains your jQuery code :
<!-- Example CDN Reference to jQuery -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
// Your code here
});
</script>
I have a html + css + javascript application.
I want to be able to enable theming.
All my css are replicated in two folders: /theme1/... and /theme2/...
So my html looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme1/file1.css"/>
<link rel="stylesheet" href="theme1/file2.css"/>
....
....
</head>
<body>
.....
</body>
</html>
I want to be able to change using javascript the home folder of the css (theme1 to theme2).
Any ideas?
Here is what you will need to solve the problem:
Get the relevant tags. In this case, any link tag with rel="stylesheet" will probably do, but you can even go so far as to specify "starting with theme1" if you want. This can all be done with document.querySelectorAll("link[rel=stylesheet][href^=theme1]")
Loop through them. A simple for loop will do nicely.
getAttribute("href") gets the string you need.
replace() will allow you to replace the part of the string you want.
setAttribute("href",newattr) will put the attribute back into the tag.
<link id="foo" rel="stylesheet" href="theme1/file1.css"/>
When you want to change the theme:
document.getElementById('foo').href = 'theme1/file2.css';
This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 2 years ago.
I am following ExtJS tutorial and tried creating a new page. It works.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function () {
console.info('woohoo!!!');
}); //end onReady
</script>
</head>
<body>
</body>
</html>
However, if I change the script tag line to use self closing tag, like following, it doesn't work.
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"/>
In Firebug, it complains Ext.EventManager is undefined. I have two questions
Is it generally a bad idea to use self-closing tag for script? I have read this post but it sounds to me it's talking about xhtml.
I am trying to learn Javascript. Although I know the way to fix it is to not use self closing tag, I would still like to know why FireFox think Ext.EventManager is undefined?
Yes, it's a bad idea. The script tag needs an ending tag, as you can see in the HTML specification - The script element
Different browsers have different ways of handling incorrect code. Each browser tries to make the best of the situation, but they have different opinions about what's best in each situation. One way to handle some of the incorrect code is to ignore it, which is likely the reason why the script is not executed in Firefox.
Besides, as you don't have a doctype tag the page is by default HTML, not XHTML, so you can't use self-closing tags at all.