Develop Reference

Javascript/AngularJS: Check if an element has the style overflow-y applied to it

I am trying to check inside my code if a has applied to its css styling the attribute overflow-y: auto. For example if my has a class "abcd", and "abcd" has for its css overflow-y: auto, then the passes. While I've already found a method for jquery, which I am not using, I want to find a method for pure javascript (or Angular JS) to find if the element has a given css attribute. How can I do this without jquery?

You can check with pure javascript by using this code : document.getElementById('myElement').style['overflow-y'].
The issue is that this code will works only for inline css style, as in <div style="overflow-y: visible">...</div>. If the css style comes from a class, you can't find it like this.
The jQuery css method will find the computed style (so it can detect the real value of overflow-y even if it comes from a class). But the css code is very huge. You can find it here : https://github.com/jquery/jquery/blob/master/src/css.js
I want to add that checking if an element has a specific css style is a very bad smell.
Instead of this, you should really consider to check if the element has a specific class. Or if you have using angularjs, a simple boolean in the model will do the trick.
If you really want to check if an element has the overflow-y: auto; style applied, according to the jQuery code, they use window.getComputedStyle(element). They also have a lot of code with a temporary div with a weird position (position:absolute;left:-11111px;width:60px;) but it is mostly to support old browsers like IE8 and IE9.
In your case, something like this could works : window.getComputedStyle(document.getElementById('myElement'))['overflow-y'] === 'auto'.

You can use the getComputedStyle method available on the window object.
var myElement = document.getElementById('myElement');
var overflowValue = getComputedStyle(MyElement).overflowY;
if (overflowValue == 'auto') {
// your code here
}
This method will get values of css properties applied in the moment.
For more info, you can refer here.
hope that helps.

How to get height of a div tag if html is dynamically inserted?

I have a div tag on my page.
<div id="filterDropdowns"></div>
I made html markup in my javascript and then inserted into div.
var markup = "";
markup = //Here makup is created through some logic.
$("#filterDropdowns").html(markup); //Inserted html
Everything is working fine.After this, when i trying to get the height of "filterdropdown", it's always 0. I have tried many ways to get the height but i am unable to get the height. I have tried jquery method like innerheight,outerHeight and javascript method as well but it always zero. How i can get the height?

try this for get height via jQuery :
alert($("#filterDropdowns").find("div").height());

height: auto; wont work. The div created by your logic, add height:inherit; to that div and also give a constant height to you #filterDropdowns It needs a height. If parent is 0 the child cannot inherit the height. So either specify a height in your div created your logic or inherit the parents height.

This code will give you the height:
$("#filterDropdowns").height()
Simple as that. No matter how the content was inserted. Dynamically or not.
However, please consider the following:
1) Make sure you check the height of the element really after you had already inserted its content. If you check the height before adding the content then, well, an empty element's height is most likely 0 (unless it is styled somehow).
2) Make sure the element is visible at the time you are checking the height, otherwise the result of the height method might be at least inaccurate.
3) If the contents of the element is positioned absolutely or floating then the height of the element will actually remain 0.

<div id="filterDropdowns" style="height:auto"></div>
try this

Try to this solution
var currentHeight = 0;
$(window).load(function() {
currentHeight = $('#filterDropdowns').outerHeight();
console.log("set current height on load = " + currentHeight)
});

Try this
html:
<div id="filterDropdowns" style="display:inline-block;height:auto"></div>
js:
$("#filterDropdowns").height()

Try jquery's .attr() function.
then, Write $('#filterDropdowns').attr('height','yourvalue');

How to know if an element's width is absolute or relative?

I'm coding a javascript scriptlet on which I'm resizing a DOM element. But I need to know if the element was originally sized absolutely or relatively.
Of corse I can read its clientWidth property, but it always returns an absolute integer. How can I know if it was originally specified by a percentage number in a CSS? Is there any CSS property -readable from javascript- containing the original width expression?

If your width value is inside the tag you can use document.getElementById("id").style.width. But if your css is inside a tag style, that's going to make you use jquery for a quick solution or you are going to have to create your own function to extract this value, like this one: How to get an HTML element's style values in javascript?

Javascript style issue

I am using javascript to display the height of my current div.
This is an example of the effected area
//css
.test
{
height:1px;
}
#test1
{
margin:1px;
}
//html
<div id="test1" class="test"></div>
//javascript
var a = document.getElementById('test1');
a.style.height //how I access the style
Firebug says that the length of style is 0 and height is empty.
How can I access the correct height?

You need to look at the computed style, not the specified style. See Quirks mode's getstyle page which answers the question
Sometimes you'll want to see what styles the default document view has. For instance, you gave a paragraph an width of 50%, but how do you see how many pixels that is in your users' browser?
and it explains how to derive and use the getstyle function, though it's easier to use a library like jquery which provides a simple css function.

Try a.offsetHeight instead of a.style.height
jsfiddle demo

div height is dependent on its children. If its empty, it'll be 0.
The code you have to get height is correct, btw.

Check out the getComputedStyle method. It should do what you are looking for. Kinda lame, really, I wish this was handled better in the DOM.

How do I get a computed style?

Can anybody please help me with a script.. or a way to get the value of
height : 1196px;
width: 284px;
from the computed style sheet (webkit). I know IE is different- as usual. I cannot access the iframe (cross domain)—I just need the height/width.
Screenshot of what I need (circled in red). How do I access those properties?
Source
<iframe id="frameId" src="anotherdomain\brsstart.htm">
<html id="brshtml" xmlns="http://www.w3.org/1999/xhtml">
\--I WANT THIS ELEMENTS COMPUTED BROWSER CSS HEIGHT/WIDTH
<head>
<title>Untitled Page</title>
</head>
<body>
BLA BLA BLA STUFF
</body>
</html>
\--- $('#frameId').context.lastChild.currentStyle
*This gets the actual original style set on the other domain which is "auto"
*Now how to getComputed Style?
</iframe>
The closest I got is this
$('#frameId').context.lastChild.currentStyle
That gives me the actual style on the HTML element which is "auto" and that is true as thats what's its set on the iframed document.
How do I get the computed style that all the browsers use to calculate the scroll bars, and inspect elements values?
Using Tomalaks answer I conjured up this lovely piece of script for webkit
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyValue("height")
or
window.getComputedStyle(document.getElementById("frameId"), null).getPropertyCSSValue("height").cssText
Result 150px
Identical to
$('#frameId').height();
So I got them to add a id of 'brshtml' to the head- maybe it will help me select the element easier. Webkit inspection shows me now html#brshtml but I cant select it using getelementbyid

See this answer.
It's not jQuery but, in Firefox, Opera
and Safari you can use
window.getComputedStyle(element) to
get the computed styles for an element
and in IE you can use
element.currentStyle. The returned
objects are different in each case,
and I'm not sure how well either work
with elements and styles created using
Javascript, but perhaps they'll be
useful.
The iframe looks about 150px high to me. If its contents are 1196px high (and indeed, you appear to be exploring the html node, according to the screenshot) and that's what you want to get, then you should navigate into the DOM of the iframe's document and apply the above technique to that.

looking at https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements
Use .clientWidth to get an integer width in px.
<div id="mydiv" style="border:1px solid red;">This is DIV contents.</div>
<button onclick="alert(
document.getElementById('mydiv').clientWidth);">
Click me to see DIV width in px
</button>

jQuery solution:
$(".element").outerWidth( true );
//A Boolean indicating whether to include the element's
//margin in the calculation.
Description: Get the current computed width for the first element in the set of matched elements, including padding and border. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
You can read more about outerWidth / outerHeight at api.jquery.com
Note: the selected element must not be "display:none" (in this case you will get only the paddings as total width without the inner width )

If you're already using jQuery, you can use CSS to get the computed /current for any style property in any browser.
$("#el").css("display")
var $el = $("#el");
console.log(".css('display'): " + $el.css("display"))
var el = document.getElementById("el");
el.currentStyle = el.currentStyle || el.style
console.log("style.display: " + el.style.display)
console.log("currentStyle.display: " + el.currentStyle.display)
console.log("window.getComputedStyle: " + window.getComputedStyle(el).display)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="el">element</div>