Why am I not able to access CSS properties with JavaScript?
Question
I'm not able to retrieve CSS properties on the div -element with the following code:
function myFunction() { console.log( document.getElementById("myDiv").style.borderTopColor ); }
div { border-top-width: 15px; border-top-color: green; }
<div id="myDiv">This is a div.</div> <button type="button" onclick="myFunction()">Return top border color</button>
6 answers
solution1
1 ACCPTED 2017-10-24 04:37:41
Combining comments and answers from others. For details you can refer those.
Two changes to be done to make it working
- Add Border Style:
border-top-style: solid; - Modify JS code to get the border color:
alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);
<!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <style> div { border-top-width: 15px; border-top-color: green; border-top-style: solid; } </style> </head> <body> <div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction()">Return top border color</button> <script> function myFunction() { alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor); } </script> </body> </html>
solution2
0 2017-10-24 04:43:52
Use getComputedStyle to get the property values.Also borders are not visible unless style is specified.
The below snippet will return the color code in RGB format
function myFunction(elem) { var elem1 = document.getElementById(elem); var style = window.getComputedStyle(elem1, null); var getBorderTop = style.getPropertyValue("border-top-color") console.log(getBorderTop); }
div { border-style: solid; border-top-width: 15px; border-top-color: green; }
<div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction('myDiv')">Return top border color</button>
solution3
0 2017-10-24 04:49:15
It should be
function myFunction() {
alert(window.getComputedStyle( document.getElementById("myDiv")).borderTopColor)
}
play it here
solution4
0 2017-10-24 05:00:56
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
border: thick solid blue;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Change color of the top border</button>
<script>
function myFunction() {
alert(document.getElementById("myDiv").style.borderTopColor = "red");
}
</script>
</body>
</html>
here is correct for changing the top border color.
Whenever we define the style prop in the style tag then we have permission to change it And define style prop correctly as given in the code.
I hope u understand the above code. If any query u can ask me
solution5
-1 2017-10-24 04:30:30
You don't set a style to the border. By default it is none. Border-top-style
Or you can also use border-top: 15px solid green;
Also for getting styles which are not defined inline you have to use window.getComputedStyle
div { border-top-width: 15px; border-top-color: green; border-top-style: solid; }
<!DOCTYPE html> <html> <meta charset="UTF-8"> <head> </head> <body> <div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction()">Return top border color</button> <script> function myFunction() { var elem = document.getElementById("myDiv"); var style = window.getComputedStyle(elem, null); alert(style.borderTopColor); } </script> </body> </html>
solution6
-1 2017-10-24 04:50:19
Try something like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mystyle
{
border-top: 15px solid green;
}
</style>
</head>
<body>
<div id="myDiv">This is a div.</div>
<br>
<button type="button" onclick="myFunction()">Return top border color</button>
<script>
function myFunction() {
document.getElementById("myDiv").className = "mystyle";
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.