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..
Use: <head> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/Resources/css/style1.css" /> </head> ...
In the code above, you are applying different styles to different elements. The only way you can combine classes is if you apply all styles to all elements. If you...
You have to get all the elements with class close then attach click to every one, the click should go up to the parent panel and remove the class active,...
The problem comes from this: tr td { padding:6px 8px; } No matter how small you try to make your cell, it will always take up at least 16px of...
If I understand your question properly, it sounds like you're trying to set placeholder text in your css file, and then use javascript to parse out the text with the...
Yes. CSS is, in general, not safe - there are a number of ways that it can be used to inject Javascript code, including but not limited to: Dynamic properties...
Try this (CSS3, not compatible with IE8) to make every (5n+1)th list element move to a new line: #mainMenuList > li:nth-child(5n+1) { clear: left; } http://jsfiddle.net/mblase75/J4gQP/ If backwards compatibility is...
<a> (anchors) are inline elements. <div> (divisions) are block level elements. HTML 4.01 specifications state that <a> elements may only contain inline elements. A <div> is a block level element,...
Try out the following code snippet. Since it makes use of basic elements of bootstrap functionality.You can check the UI responsiveness on across different mobile devices. <!-- Latest compiled and...
I made you a fiddle here And here the code: 1. HTML <div id="left">text</div> <div id="center">text</div> <div id="right">text</div> 2. CSS html, body { height: 100%; margin: 0; } div {...
Your form is ok, and you need to implement a handler for subscribing like; subscribe.php <?php if (empty($_POST["newsletter_email"]) { die("You should provide email!"); } else if (!preg_match( "/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z] {2,4}$/i", trim(...
It is impossible to have background image sprites dynamically change in size with just CSS (at least as far as I've been able to figure). If you want to use...
Apply padding-left:0 and change the list style position to inside ul { padding-left:0; } ul li { list-style-position:inside } Example link http://jsfiddle.net/vF5HF/...
In your CSS definitions, there could be other styles with more specificity that get higher priority hence overriding your defined style. Based on your posted HTML, this will most probably...
You can do that with CSS, just use min-width and max-width together instead of width Also you can simply remove width from your CSS or change it into width: auto;...
You could just do: if(strlen($search_term) <= 0){ $error[] = "Nope"; } And then wherever you want in your html, put: <?php if(!empty($error)) { echo "<div align='center' class='foo'>" . $error [0]...
Make the line-height of the div the same as the height of the div, eg: #UploadSuccess { height: 20px; line-height: 20px; } This will only work if you have one...
The best I've seen is: <div class="button button-primary js-modal-popup"> Essentially - add a class with js- prepended to it so you can distinguish from your stylistic classes and your jQuery...
You can check if input is checked on change of input[type="checkbox"] and show the modal. $('input[type="checkbox"]').on('change', function(e){ if(e.target.checked){ $('#myModal').modal(); } }); /* ---------------------------------------------- CHECKBOX ---------------------------------------------- */ /* Base for label...
Use a container around big_div and vert and apply Faux Columns to it. lower should then handle itself either inside or outside of the container. Let me know if you...
Use: .k-calendar .k-state-selected { background: blue; } instead...
Simply floating the element would be ideal as it will still retain padding information from the parent to align top part correctly with the sibling inline element. Fiddle: http://jsfiddle.net/Varinder/eg7DW/1/ Edit...
Problem has been solved by setting GtkCheckButton-indicator-spacing to 0px; in the beginning of CSS file. * { -GtkCheckButton-indicator-spacing: 0px; } ...
ul { padding-left:0px; margin-left: 0px; } I suggest using firebug, a FireFox plugin to find these types of issues. Click element in question, then look at it's "layout." It'll tell...
#one{ background-color:green; color:white; height:40px; } #two{ background-color:red; color:white; height:40px; display:in-line; } #one:hover + #two { display:none; } <div id="main"> <div id="one"> <p>Hover to hide div below</p> </div> <div id="two">...
Maybe it does help if you're setting the behavior not within the CSS but within the HTML page in the head section. I don't know of a possibility to make...
Option C: Do the logic in the controller and assign the styles in the view but in a simpler way: In the controller: ViewBag.IsJanuary = (month == Month.January); ViewBag.IsTuesday =...
Currently, CSS providers are not inherited to the children style contexts. So you need to add the CSS provider to the screen using gtk_style_context_add_provider_for_screen() Try changing gtk_style_context_add_provider(gtk_widget_get_style_context(window), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER); to...
<span> tag is inline level by default, width and height values will not apply. You could set it as inline block, read this post to learn more of the differences...
You don't need change your image size, you can set transform: scale to zoom them. .frame { width: 100%; height: 100% overflow: hidden; } .zoomin img { width: 100%; height:...