I was wondering, is it possible to change the attached stylesheet using JavaScript?
For example:
<link href="stylesheet.css" rel="stylesheet" type="text/css">
.....
<div id="controls">
<div id="red" onClick="styler(1)">R</div>
<div id="green" onClick="styler(2)">G</div>
<div id="blue" onClick="styler(3)">B</div>
<div id="reset" onClick="styler(4)">Reset</div>
</div>
JavaScript
function styler(attr){
switch(attr){
case'1':document.----- = "stylesheet1.css";break;
case'2':document.----- = "stylesheet2.css";break;
case'3':document.----- = "stylesheet3.css";break;
case'4':document.----- = "stylesheet.css";break;
default:;break;
}
}
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
It should be easy:
<html>
<head>
<link rel="stylesheet" href="/tmp/default.css" id="default">
</head>
<body>
<button id="bt">change style</button>
<script>
var targetStyle = document.querySelector('#default'),
otherStyle = '/tmp/style2.css';
document.querySelector('#bt').onclick = function(){
targetStyle.href=otherStyle;
};
</script>
</body>
</html>
Try it
<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>
Another option is to toggle the disabled property of the link DOM element. According to Mozilla the disabled HTML attribute is non-standard, but the javascript property is. So if you're toggling it with JS you should be fine.
Related
I want to create a to do list....the add and delete buttons work but i want to delete an element when i click on it...i tried with jquery but it doesnt work when i click on the javascript generated elements, but when i test on a html element that was initial on the page it works. What is the problem ? Here is the code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
<script>
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>
try this one:
$(document).ready(function(){
$("body").on("click","p", function(){
$("p").hide();
});
});
Snippet:
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
function sterge() {
var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);
}
$(document).ready(function(){
$("body").on("click","p", function(){
$(this).hide();
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">
<div id="div1">
<h1>To do app</h1>
<input type="text" name="" value="" id="inp">
<button type="button" name="button" onclick="adauga()">Adauga</button>
<button type="button" name="button" onclick="sterge()">Sterge</button>
<hr></hr><br>
</div>
<h5 id="xxx">jquery</h5>
</body>
</html>
The p element doesn't exist till you click the button and run the function adauga(), so you can't bind the click event to an element that doesn't exist yet, You have to bind the click event in your adauga() function as below:
function adauga() {
var cuvant = document.getElementById('inp').value;
var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
$("p").click(function(){
$("p").hide();
});
}
or run the function when the page is ready:
$(document).ready(function(){
adauga();
$("body").on("click","p", function(){
$("p").hide();
});
});
attention: hide() function doesn't remove an element just change the display to none, if you want to remove the element from your dom use remove() function instead!!!
When your code runs the event-listeners of the p-elements, your elements doesn't exist, so they aren't evected by the registering of the event-listener. You have to add the event-listener after you created the p element. Try something like:
var para = document.createElement("p");
$("#div1").on('click', 'p' function(){
$("p").hide();
});
Hello I am very new to ExtJs please help me knowing Ext.get()
This works:
Ext.get('tag2').hide(); // worked well on with Id
<div id ="tag2">using id</div><!--given with id-->
Now this is the problem
Ext.get('tag2').hide()//hiding only id not class
<div class ="tag2">using class</div><!--given with class-->
Doesn't work on class.
Take a look the complete code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('tag2').hide()//hiding only id not class
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('helloWorldPanel'),
text: 'show',
listeners: {
click: function() {
this.hide();
},
hide: function() {
Ext.get('tag1').hide();
Ext.get('tag2').show();//not working hear
}
}
});
});
</script>
</head>
<body>
<div class ="tag1">Test Div</div>
<div class ="tag2">using class</div><!--given with class-->
<div id ="tag2">using id</div><!--given with id-->
<div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- >
</body>
</html>
Use the following instead of get. Get accepts the id, for querying classes, you need to use select.
Ext.select('.tag2').hide();
UPDATED
Ext.get() is using ID to find element.
Ext.select(selector) - use this to access DOM element by class selector
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tag = Ext.get('tag');
var tagTwo = Ext.select('.tag2');
console.log(tag);
console.log(tagTwo);
tag.hide(); // hide by ID
tagTwo.hide(); // hide all divs with tag2 class value
});
</script>
</head>
<body>
<div id="tag">Test Div</div>
<div class="tag2">Test Div2</div>
<div class="tag2">Test Div3</div>
</body>
</html>
I'm using Mozilla Firefox 43.0 on Ubuntu 12.04 LTS. I wrote the following JavaScript method saved in mainScript.js:
function writeDateHu() {
var days = ["Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat", "Vasárnap"];
var current = new Date();
var s = "";
s.concat("<p>", current.getFullYear(), ". ", (current.getMonth() + 1), ". ", current.getDate(), ".<br />", days[current.getDay()], "</p>");
document.getElementById("datum").innerHTML = s;
}
I've also tried to add them by using + instead of concat.
In the main.html I have the following:
<!DOCTYPE html>
<html>
<head>
<title>HomePage</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="mainStyle.css" />
<script type="text/css" src="mainScript.js"></script>
</head>
<body onload="writeDateHu();">
<div class="alap">
<div class="fejlec">
</div>
<div class="bal" id="datum">
</div>
<div class="tartalom">
</div>
<div class="lablec">
</div>
</div>
</body>
</html>
After loading page, the inspector says me ReferenceError: writeDateHu is not defined. Also, sometimes (e.g. I insert the script in the html) I don't get the error, but nor the date.
Thanks for any advance.
You have loaded a JavaScript file as CSS.
<script type="text/css" src="mainScript.js"></script>
All you should have done is this
<script src="mainScript.js"></script>
I am trying to display one of two images using a click button using random number generator by assigning each image to an if and else statement. I'm not sure where the problem is. Here is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 9</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
.auto-style1 {
text-align: center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Arrays and Coditional Statements</h1>
<h2 class="auto-style1">Flip a coin </h2>
<script>
function myFunction1() {
var result = doucment.getElementById("pic");
var x = Math.floor(Math.random() * 2);
console.log(x);
if (x == 0) {
document.getElementById("Coin").innerHTML = "Heads"
result.innerHTML="<img alt=\"the frontside of a coin\" src=\"images/heads.jpg\" />"; }
else {
document.getElementById("Coin").innerHTML = "Tails";
result.innerHTML= "<img alt=\"the backside of a coin\" src=\"images/tails.jpg\" />";
}
}
myFunction1();
</script>
<button type="button" onclick="myFunction1()" id="Coin">CLick ME</button>
<p id="pic"> </p>
</div>
<footer>
</footer>
</body>
</html>
You have a very simple typo. You wrote:
var result = doucment.getElementById("pic");
document is spelled wrong
I am trying to create an image which is initially hidden - but reveals itself once the document has loaded completely via the JavaScript file.
$(document).ready(function () {
document.getElementById("theImage").style.visibility = "visible";
});
#theImage {
visibility:hidden;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kami Nelson Bio </title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="KNelson-Styles.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
<script src="KNelson_reveal.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="theImage">
<img src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
</div>
<div id="div1" class="fluid">
<h1>Bio for Kami Nelson</h1>
<p>Text</p>
</div>
</div>
</body>
</html>
Why is this not working?
Thank you in advance.
You should either include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or use native window.onload() instead of $(document).ready()
window.onload=function () {
document.getElementById("theImage").style.visibility = "visible";
}
You are missing the jQuery library reference
You are not properly
using selecter to select image of id theImage.
theImage is supposed to be for the img tag.
JavaScript
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#theImage").css('display':'block');
});
</script>
CSS
#theImage {
display: none;
}
HTML
<img id= "theImage" src="images/Kami-100.jpg" alt="Kami Nelson Image"/>
why don't you just draw the image when the window loads?
give your image an id i'll use "image" for this example.
<script>
window.onload = function ()
{
$('#image').css({"display":"block";});
}
</script>