How can I read a CSS property value using Javascript?
Tags: javascript,html,css,alert
Problem :
function displayWidth(){
document.getElementById("navbar").className = "navbar-after-click";
alert(document.getElementById("navbar").style.width);
}#navbar {
background-color:red;
height:200px;
}
.navbar{
width :220px;
}
.navbar-after-click{
width:60px;
}<html>
<body>
<div id="navbar" class="navbar">
</div>
<button type="button" onclick="displayWidth();">show width </button>
</body>
</html>I'm not too familiar with Javascript, that is why I am asking this question. In the above code I tried to alert a CSS property value using Javascript. But it doesn't alert any value as I expected. Is there any wrong with my code? How can I fix this?
Solution :
use this script for you code
<script type="text/javascript">
function displayWidth(){
var element = document.getElementById('navbar');
var style = window.getComputedStyle(element);
alert(style.width); //style. all possible objects list in the end
}
</script>
demo:
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
background-color:red;
height:200px;
}
.navbar{
width :220px;
}
.navbar-after-click{
width:60px;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<html>
<body>
<div id="navbar" class="navbar">
</div>
<button type="button" onclick="displayWidth();">show width </button>
</body>
</html>
<script type="text/javascript">
function displayWidth(){
var element = document.getElementById('navbar');
style = window.getComputedStyle(element);
alert(style.width);
}
</script>
</body>
</html>style. //all possible objects list in below link
http://www.w3schools.com/jsref/dom_obj_style.asp
CSS Howto..
jsBin Demo A quick introduction, what it takes to create a <span class="ribbon">FREE</span> ribbon shape?: .ribbon{ display:inline-block; height:0; border-bottom:20px solid gold; border-left:20px solid transparent; border-right:20px solid transparent; } Now, using...
Thought I'd add a javascript version as css animations can be tricky and are often not fully supported (though I'm not sure the other answer even uses animations and I...
Good example of CSS hovers. Refer to the zoom & pan section: "Zoom and Pan" Check this and this link /*GROW*/ .grow img { height: 300px; width: 300px; -webkit-transition: all...
Firefox and IE don't support gradients as the image source for border-image An alternative way to set your result would be to use to background-images, and setting different clipping and...
Using jquery, you could avoid paste using this $('.textboxClass').on('paste', function(e) { e.preventDefault(); }); you can avoid copy paste and cut using this $('.textboxClass').on('copy paste cut', function(e) { e.preventDefault(); }); ...
Working fiddle: https://jsfiddle.net/ebkc9dzL/19/ You need to have a variable outside the click function that will tell you the direction of the animation, so that once inside the click function you...
It seems like this is currently not supported by the APIs provide by Qt 5
You can also invoke a stylesheet for different versions of Internet Exploer, versions older than a specific version, and using operators. CSS-Tricks.com has a nice article demonstrating more possibilities. Internet...
You can do this using flexbox and flex-direction: column; Doing so will allow you to have new columns once the bottom of parent element is reached. Here is an example:...
From your samples that looks like Sass (which can be used in conjunction with CSS modules). If so then just import the partial containing the variables. @import 'path/to/variables.scss'; If there's...
This is the same problem that the Mozilla Bespin team ran into. (back when they were using Canvas, before it merged with Ace) Don't give the Canvas any CSS width/height...
DEMO You can use jQuery focus & blur event. Like this: $('.inputbox').focus(function(){ $('.searchmenu').addClass('is_focused'); }); $('.inputbox').blur(function(){ $('.searchmenu').removeClass('is_focused'); }); CSS: .searchmenu form { display:none; } .searchmenu:hover form, .searchmenu.is_focused form{ display:block; }...
The issue is with these two styles: .grayscale.grayscale-off, .grayscale.grayscale-fade:hover { -webkit-filter: grayscale(0%); filter: none; } .grayscale.grayscale-replaced.grayscale-off > svg, .grayscale.grayscale-replaced.grayscale-fade:hover > svg { opacity: 0; } When you move your cursor...
vh and vw units are not intended to be used for font-size if you want to be compatible with WCAG. The only possible solution if you want to have the...
If you could apply classes to your td's you could try this: <table cellspacing="0"> <tr> <td class="label">Label1: </td> <td>input1</td> <td class="label">Label2: </td> <td>input2</td> </tr> </table> With the following css: table...
Use the CSS attribute selector syntax: div[data-uid="20"] { background:red; } <div class="nx-field nx-modified required" data-uid="20"> <textarea></textarea> </div> <div class="nx-field nx-modified required" data-uid="21"> <textarea></textarea> </div> ...
Id's are unique in HTML. You can't have more than one element with the same id on the page and expect it to behave. This is exemplified by the behavior...
Try this: index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body ng-app="myApp"> <div ng-controller="newcontroller"> <div ng-class="[myclass]">welcome</div> <button ng-click="newfunction()">click</button>...
I would use output buffers & include instead of file_get_contents, include'core/template.php'; here is a blankspace missing. In your case, why not just put the CSS and JS into header.php ?...
The problem is - BeautifulSoup has a very limited CSS selector syntax support. In your case, going sideways with ~ or + is not going to work as is. If...
You would need to target the page class. If you look at the source code on whatever page you are on, you'll notice the body class include a unique identifier...
It should be enough with: .ui-breadcrumb .ui-icon-home { background-image: url("#{resource['images/look/bandeau.png']}"); background-position: 0; /* asuming bandeau.png is a single image */ } But you have to make sure two things: First,...
You should look here: http://www.javascriptkit.com/javatutors/setcss3properties.shtml As you can see setting CSS Properties with "-" just results in the next character to be capital: document.getElementById('fade').style.WebkitTransition = 'opacity 1s'; document.getElementById('fade').style.MozTransition = 'opacity...
You maybe able to parse the CSS code from each of the css files within the theme's folder using this : http://www.codeproject.com/KB/recipes/CSSParser.aspx and then show the classes in a list...
h2 is a default block level element, you are using display: inline-block; and hence it won't center your text, as it doesn't take up entire horizontal space anymore, so you...
If you don't want to use a framework (my advice is to use it for save a lot of money, however use ZURB foundation that is mobile-first design) you have...
The width you're using is too wide. Try to make the width 750px for example. You'll see that it works fine! Keep in mind that the padding will be added...
Since your h1 is layout parent, you only need to add left: 0 to the #innerFooter h1 div rules.
Your html become invalid because all checkboxes got the same id, and the labels got the same for attribute so only the first checkbox will be checked when you click...
There is my best try. I have a little isue that I have corrected in Chrome; but I really don't know even why it works. The CCS is .test {...