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..
This can be buggy. What I usually do is make a table. And since table rows start with vertically-centered alignments, it's quite simple. <div class="search-option"> <table cellspacing="0" cellpadding="0"> <tr> <td>...
try setting a background image and then moving (with padding) out of the box the original image something like this... EDIT i had to tweak it a bit to have...
Take a look at this article: CSS: User Agent Selectors Basically, when you use this script: var b = document.documentElement; b.setAttribute('data-useragent', navigator.userAgent); b.setAttribute('data-platform', navigator.platform ); b.className += ((!!('ontouchstart' in window)...
LIVE DEMO if your image element is i.e: .circ like <img class="circ" src="img.jpg"> and you have .circ{ width : 100px; vertical-align: middle; border-radius: 50%; box-shadow: 0 0 0 15px #ddd;...
You could use something like this: NSString *htmlTemplate = @"<html>\n" "<head>\n" "<style type=\"text/css\">\n" "h4 {\n" "text-transform: uppercase;\n" "margin-bottom: 5px;\n" "font-family: HelveticaNeue;\n" "font-size: 18px;\n" "color: #212121;\n" "font-weight: bold;\n" "line-height: 1.1;\n" "text-align:...
You have to let it know how you'd like it to look once it's active. And you need a little jquery to do the active swapping for you. So here...
You should be able to access the Style element by using someUiObject.getElement().getStyle() and then manipulate the style there....
The general rule is, if clicking an element leads to a new page being loaded, use an anchor. So, in your case, I would use the following: <a href="new-page.html" class="albumbutton1">...
This actually can be done without any Javascript, anyway here's a working example using jQuery. <div>Hello!</div> div { opacity: 0; position: absolute; top: 50%; left: 100%; width: 5rem; line-height: 5rem;...
No javascript needed. However, you may need to shrink the height of your div's on top to make it practical. Here's modified CSS that works (not fully tested in all...
Try to combine display-block and inline-block like here: <div style="width: 100%; height: 300px; white-space: nowrap;"> <div style="width: 100%; min-width: 641px; "> <div style="display: table-cell; width: 30%; height: 286px; background: #ffff00;...
CSS used by SourceBits: body { background: #8D9698 url('../images/body-by-bg.jpg') repeat fixed 0 0; } SourceBits background link: http://www.sourcebits.com/images/body-by-bg.jpg CSS used by YouTube: body { background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0 0; background-color:...
If the text should be cutted on the edge of the table cell you have to change the table-layout to fixed and the td needs a hidden overflow. table{table-layout:fixed} table...
There are multiple way to implement a "pure CSS" tab control. From this example, I've modified the HTML part of your JSFiddle to add <div> content within <li> markup. I...
Maybe you are trying to place DIV(0) IN DIV(1) and DIV(1) should contain DIV(2) AND DIV(3) side by side. For That: <html> <head> <title>Practice the advanced elements/css3</title> </head> <body> <div...
Please check this code: JSFiddle What i understand from you i put here, please let me know if you want any more help. #store { background-color: #aaaaaa; width: 96%; margin:...
According to your HTML code. a tag has active class. So then it should be .navbar-default .navbar-nav>a.active, instead of .navbar-default .navbar-nav>.active>a. Important Note whereas, bootstrap states that active class should...
You can remove height and set overflow: auto : div#mktContent { background:#fff; overflow:auto;/*Replace height with overflow*/ position: relative; } fiddle...
For what you are trying to do, you don't need to use -webkit-animation-play-state. Instead, try starting the animation by applying a class with the animation properties set. Then use a...
If order doesn't matter, then put them in a ul of fixed width, and then create the unordered list with the list items at 1/3 of the ul's width and...
Try so: $this->widget('zii.widgets.grid.CGridView', array( 'selectableRows'=>1, 'selectionChanged'=>'function(id){ var selected_tr = $.fn.yiiGridView.getSelection(id); $("#"+id).find("tr#"+selected_tr).css("background-color", "red"); }', 'dataProvider'=>$dataProvider, 'columns'=>array( 'title',...
The first selector is a combination of the selectors nav ul li a:link and a:visited. It matches any link in the list in the nav element, and any visited link...
You can use the animations: .site-logo { animation: blink 1s linear infinite; } @keyframes blink { 50% { opacity: 0; } } <div class="site-logo"> <a href="http://localhost/website/"><img class="header-image" src="https://keetonsonline.files.wordpress.com/2015/05/0753.png?w=21&h=21"></a> </div> ...
The problem described above is caused by margins collapsing. Refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing You can solve it by removing the default top margin of the first h1 elementand the default body...
How to display a box of color beside a table row using CSS?
In the words of the great philosophers, the Beastie Boys, CH-CH-CHE-CH-CHECK IT OUT: http://cssdeck.com/labs/hxfa4xzz Using just CSS's :before pseudo-selector and content: property, it's doable. table { margin: 10px 10px 10px...
This is the default behavior of the image. There is about a 2px gap under the image for the letter descenders/the image lines up with the baseline of the text....
We're using a style guide in the form of a simple HTML page with examples of every CSS rule in the stylesheet. It's very easy to tell if you add...
$('a').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; }); Working fiddle :) Code from here...
What you have seems to be fine. Check this out, it is just that the shadow is deeper near the borders.By increasing the box-shadow property to a higher value, you...
We choose to version both the sass files, as well as the compiled css files. That way, everyone has access to the latest version of everything when they pull down...
In the words of the great philosophers, the Beastie Boys, CH-CH-CHE-CH-CHECK IT OUT: http://cssdeck.com/labs/hxfa4xzz Using just CSS's :before pseudo-selector and content: property, it's doable. table { margin: 10px 10px 10px...
This is the default behavior of the image. There is about a 2px gap under the image for the letter descenders/the image lines up with the baseline of the text....
We're using a style guide in the form of a simple HTML page with examples of every CSS rule in the stylesheet. It's very easy to tell if you add...
$('a').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top }, 500); return false; }); Working fiddle :) Code from here...
What you have seems to be fine. Check this out, it is just that the shadow is deeper near the borders.By increasing the box-shadow property to a higher value, you...
We choose to version both the sass files, as well as the compiled css files. That way, everyone has access to the latest version of everything when they pull down...