This question already has answers here:
why javascript this.style[property] return an empty string? [duplicate]
(2 answers)
Closed 6 years ago.
Hi there I'm having a problem. I made a box of blue color in HTML/CSS and want javascript to alert the name of color when the box is clicked. Here is my code.`
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
You need to use getComputedStyle(). .style is use to set a new value for target element.
var div = document.getElementById("box"), // element
divCSS = window.getComputedStyle(div), // element CSS
bgColor = divCSS.getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(bgColor);
}
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
<div id="box" class="box"></div>
Here is the working code
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
<script>
/* var clr = document.getElementById("box").style.backgroundColor;*/
document.getElementById("box").onclick= function() {
var ele = document.getElementById("box");
var style = window.getComputedStyle(ele);
var bColor = style.getPropertyValue("background-color");
alert(bColor);
}
</script>
This works
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="box" class="box" style="height: 100px;width: 100px;background-color: blue;margin: 0px;display: inline-block;"></div>
</body>
</html>
You can also use below code with provided html
<script>
var clr= window.getComputedStyle(document.getElementById("box")).getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(clr);
}
</script>
Try using the variable clr inside the function.
Also invoke the fucntion using onclick on the div itself.
Using regex to get the property backgorund color in whole css.
You can also use filter on #box using
var boxCss = clr.match(/#box{((.*\s*.*)*)}/g);
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script>
function colorAlert() {
var clr = document.getElementsByTagName("style")[0].innerHTML;
var res = clr.match(/background-color:.*;/g);
alert(res[0]);
}
</script>
<style>
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box" onclick="colorAlert();">
</div>
</body>
</html>
You have two ways to solve this :
keep <script> tag after after closing <div> tag
move clr var in side the onclick function,then you can write <script> tag where ever you want
Related
How to add new tags to text that is already present inside some element. Is there a better way than copying the text into new element and then deleting from old?
In the example below, text Hello World! is already present inside a div. The goal is to add h1 around the text.
<head>
<script>
let myFunction = function() {
let d = document.getElementById("testId");
let h = document.createElement("h1");
h.textContent = d.textContent;
d.textContent = "";
d.appendChild(h);
};
</script>
<style>
.testClass {
height: 100px;
margin: auto;
width: 200px;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div id="testId" class="testClass">Hello World!</div>
<button onclick="myFunction()">Click Here</button>
</body>
This question is likely going to get multiple opinions.
Mine is that you are doing it just fine using the DOM API. However, if you understand the performance and security implications of .innerHTML, you could do this:
<head>
<script>
let myFunction = function() {
let d = document.getElementById("testId");
d.innerHTML = "<h1>" + d.textContent + "</h1>";
};
</script>
<style>
.testClass {
height: 100px;
margin: auto;
width: 200px;
border-style: solid;
text-align: center;
}
</style>
</head>
<body>
<div id="testId" class="testClass">Hello World!</div>
<button onclick="myFunction()">Click Here</button>
</body>
The following script is creating a grid of 16 divs. Per mouseover effect I would like to change the color of the divs permanently. Can somebody give me a pointer how what function changeColor could look like?
<script>
let gridcontainer = document.querySelector('#gridcontainer');
gridcontainer.setAttribute('style', 'width: 20px; display: grid; grid-template-columns: auto auto auto auto;')
var index = [];
var boxes;
var i;
var change;
function createGrid(){
for(i=0;i<16;i++){
//console.log(index);
boxes = document.createElement('div');
console.log(boxes);
boxes.classList.add('boxes');
boxes.setAttribute('style','width: 30px; height:30px; background-color:
blue; margin: 5px;');
boxes.setAttribute('onmouseover', changeColor());
gridcontainer.appendChild(boxes);
}}
function changeColor(){
change = document.querySelector('.boxes');
change.setAttribute('style','background-color: red');
}
</script>
Thank you all for your help.
I have used jquery function (toggleClass) to change the color div on hover
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.b1{
background:red;
width: 30px;
height: 40px;
margin: 10px;
}
.b{
background:blue;
width: 30px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<script type="text/javascript">
$('div').hover(function () {
// body...
$("div").toggleClass("b");
});
</script>
</body>
</html>
I have done this code with javascript to try out my first javascript animation, but when I open the page, it's showing me a blank page...
can anyone please tell me whats wrong with the code and why it's not showing anything?
thanks in advance...
<html>
<head>
<title>Trying js Animation</title>
</head>
<body>
<style>
#container{
width: 500px;
height: 500px;
color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
color: red;
position: absolute;
}
</style>
<div id="container">
<div id="box">
</div>
</div>
<script type="text/javascript">
var t = setInterval(move, 1);
var pos = 0;
var box = document.getElementById('box');
function move(){
pos += 1;
box.style.left = pos + "px";
}
</script>
</body>
</html>
The box is white. Change "color" to "background-color".
I'm looking to make a program that will basically change color when each element is clicked individually. I've got it to work to the point where I can click on just an the page and both of the elements can change color but I need them to be independent of each other. How would I do something like this?
document.onload = function()
{
document.onclick = changeTest("box0", "green");
};
function changeTest(id, color)
{
var element;
element = document.getElementById(id);
element.style.backgroundColor = color;
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="onclick.js" type="text/javascript"></script>
<style type="text/css">
{
border: 0;
margin:0;
paddig: 0;
}
body
{
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
height: 10em;
width: 10em;
margin: 2px;
}
#box0
{
background-color: yellow;
}
#box1
{
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box0"></div>
<div class="box" id="box1"></div>
</body>
</html>
var box0 = document.getElementById("box0");
var box1 = document.getElementById("box1");
var color = "green";
function changeColor(box, color) {
box.style.backgroundColor = color;
}
box0.onclick = function() {
changeColor(this, color);
};
box1.onclick = function() {
changeColor(this, color);
};
<!DOCTYPE html>
<html>
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="onclick.js" type="text/javascript"></script>
<style type="text/css">
* {
border: 0;
margin:0;
padding: 0;
}
body {
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
height: 10em;
width: 10em;
margin: 2px;
}
#box0 {
background-color: yellow;
}
#box1 {
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box0"></div>
<div class="box" id="box1"></div>
</body>
</html>
Knowing you can also perfom this with addEventListener() method.
You will have to bind the event listeners to the individual boxes. It's as simple as that. Something like this (not tested):
document.getElementById("box0").onclick = changeTest("box0", "green");
document.getElementById("box1").onclick = changeTest("box1", "green");
I would use jquery for that:
html:
<body>
<div class="box" id="box0">box0</div>
<div class="box" id="box1">box1</div>
</body>
and Script:
$( "#box0" ).click(function() {
changeTest("box0", "green");
});
$( "#box1" ).click(function() {
changeTest("box1", "red");
});
Here's an jsfiddle:
http://jsfiddle.net/o8c8y23x/
Ok, without jquery:
<body>
<div class="box" id="box0" onclick = "changeTest('box0', 'red');">box0</div>
<div class="box" id="box1" onclick = "changeTest('box1', 'green');">box1</div>
</body>
jsfiddle:
http://jsfiddle.net/o8c8y23x/2/
I'm getting started with javascript and I'm trying to do a simple example but changing the CSS of a div based on the onmouseover and onmouseout of the div element.
My test is to create a green box. When I mouse over it it should turn blue. When I mouse out it should go back to green.
Here is my source:
<html>
<head>
<title>TEST</title>
<style>
#box {
width: 30px;
height: 30px;
background-color: green;
}
</style>
<script type="text/javascript">
function setBlue(){
document.getElementById("box").style.background-color = "blue";
}
function setGreen(){
document.getElementById("box").style.background-color = "green";
}
</script>
</head>
<body>
<div id="box" onmouseover="setBlue()" onmouseout="setGreen()" />
</body>
</html>
When the pages loads the green box shows but when I mouse over nothing happens.
style.background-color should be style.backgroundColor
<html>
<head>
<title>TEST</title>
<style>
#box {
width: 30px;
height: 30px;
background-color: green;
}
</style>
<script type="text/javascript">
function setBlue() {
document.getElementById("box").style.backgroundColor = "blue";
}
function setGreen() {
document.getElementById("box").style.backgroundColor = "green";
}
</script>
</head>
<body>
<div id="box" onmouseover="setBlue()" onmouseout="setGreen()" />
</body>
</html>
This can be done with style alone:
<html>
<head>
<style>
.example { background-color:green; }
.example:hover { background-color:blue; }
</style>
</head>
<body>
<span class='example'>Hallo World</span>
</body>
</html>
Instead "-" upper signal
document.getElementById("box").style.backgroundColor = "blue";
Try using the # sign when you are referencing an id, like so:
document.getElementById("#box").style.background-color = "blue";