This question already has answers here:
How to get computed style of a HTMLElement
(2 answers)
Closed 9 years ago.
As far as I was aware CSS properties of the DOM element style are camel-cased, such that min-height would be element.style.minHeight, but in my example below the style property is empty, but jQuery's abstraction gets it correctly.
// element with css: #test{ min-height: 100px; }
var el = document.getElementById('test');
console.log( el.style.minHeight );
// ""
console.log( $(el).css('min-height') );
// "100px"
See fiddle for this in action.
What is jQuery doing to pull the correct style property that I'm not doing?
interestingly enough, adding a style attribute directly on the html element does work.
You can use window.getComputedStyle(el,null).getPropertyValue("min-height") and see if it returns the right value.
WARNING: It might not work on IE < 8.
From Mozilla's website...
CSS 2.0 defined only computed value as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value so that an element could explicitly inherit a width/height of a parent whose computed value is a percentage. For CSS properties that don't depend on layout (e.g. display, font-size, line-height), the computed values and used values are the same. These are the properties that do depend on layout so have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):
background-position
bottom, left, right, top
height, width
margin-bottom, margin-left, margin-right, margin-top,
min-height, min-width
padding-bottom, padding-left, padding-right, padding-top
text-indent
Try this:
style = window.getComputedStyle(el),
console.log( style.getPropertyValue('min-height'));
Check an update of your fiddle:
http://jsfiddle.net/VEuJe/4/
JQuery method css is not so simple. You can check on this link jquery css
The .css() method is a convenient way to get a style property from the
first matched element, especially in light of the different ways
browsers access most of those properties (the getComputedStyle()
method in standards-based browsers versus the currentStyle and
runtimeStyle properties in Internet Explorer) and the different terms
browsers use for certain properties. For example, Internet Explorer's
DOM implementation refers to the float property as styleFloat, while
W3C standards-compliant browsers refer to it as cssFloat. For
consistency, you can simply use "float", and jQuery will translate it
to the correct value for each browser.
Related
I have some elements whose properties are altered via the jQuery animate() method like that:
$('#mySidenav').animate({"width": '-=190'});
$('#main_address').animate({"padding-left": '-=190'});
$('.oberflaeche').animate({'margin-left':'-=190'});
Additionally I have another absolute positioned element within the .oberflaeche element which needs to be extended after the content moves to the left due to the operations named above in order to still properly fit into its container.
To do so I use the css property clip-path which works fine:
clip-path: inset(0px var(--clipSize) 0px 0px);
The only problem that occurs is that I have to alter the clip-path property dynamically as the window sizes are differing. Currently I am doing that via class-based css as I am not sure if it is possible with jQuery. Because of the different approaches (jQuery vs. css) the two effects are not being displayed simultaneously - the css clip-path effect is incongruous. I already tried to cover that problem using the transition-delay property as well as a transition-timing-function but I had no luck.
So the question is: Is it possible to animate the clip-path property like it can be done with the css properties of width or padding to achieve a consistent effect? I am looking for something like
$('#dynamic_element').animate({'clip-path': 'inset(0px '+variable_pixel+' 0px 0px)'});
which I can call where I also call the other animations.
Any help is highly appreciated. Thanks in advance!
Based on georg's proposal (see: https://stackoverflow.com/a/16857838/7323120) I was able to figure it out myself. Using the animate method you can iterate over custom value ranges and adjust the respective css in the method's callback like:
$({step: 0}).animate({step: 80}, {
step: function(val) {
// val equals the current step
$('#target').css('clip-path', "inset(0px "+val+"px 0px 0px)")
}
});
This question already has answers here:
Get element CSS property (width/height) value as it was set (in percent/em/px/etc)
(5 answers)
Closed 3 years ago.
I'm trying to parse a web page (any web page actually) and dynamically apply some adjustments to font sizes of DOM elements.
As far as I could see:
element.style.fontSize will return the value plus unit, e.g.: "11px", or "1em", or "1rem", which is fine for me, BUT...
element.style.fontSize will return no value if the font size is defined via a css class. So if I want to address all DOM elements (most of which won't have their font-size defined in their style attribute), I'll have to use getComputedStyle instead, BUT...
getComputedStyle seems to return all font sizes in px, even if it was originally defined in em or rem in the css, e.g.: font size defined as "1rem" => getComputedStyle returns "16px" instead.
For my purpose, I'd like to know the original font-size value with its original unit, so get "1rem" rather than "16px".
Is it possible?
If you're trying to dynamically adjust font sizes, then .style.fontSize is the way to go. This is due to the fact that inline styles have a much higher level of specificity, so your changes will override any styles that may be present in the stylesheet.
.getComputedStyle() returns the CSS value after "after applying active stylesheets and resolving any basic computation those values may contain". That means that the rem is taken into account and adjusted accordingly. Having said this, if you need to target based on existing values set in the stylesheet, I think .getComputedStyle() is the best bet. The fact that it shows the calculated value shouldn't make a difference; you're still able to manipulate 'changes' after the conversion -- and you can even convert back if need be.
Either way, you'll need to set the property with .style.fontSize.
The MDN documentation for getComputedStyle states
The values returned by getComputedStyle are known as resolved values.
These are usually the same as the CSS 2.1 computed values, but for
some older properties like width, height or padding, they are instead
the used values.
Is there a way to only get the computed values without the used ones?
My use case is this:
Take for instance a body element. The browsers width is currently 600px. If you call getComputedStyle on the body element, the style returned would contain width: 600px.
Resize the browser and the width will be different again, although the "correct" value should probably be auto.
I'd need the returned style to be idempotent, meaning that I can set the style back on the element without changing some values (like width) to fixed values.
For a given element and style property you would need the first of:
A value that has been explicitly applied to an element (through the style attribute or CSS)
The browser's default value for that property
You cannot do that reliably because the CSS spec does not provide a way to access the browser's default CSS rules.
el = function(q) {return document.getElementById(q)};
el('strange').style.height = '100px'
el('strange').height = 2000
alert(el('strange').height) // 100?
alert(el('strange').getAttribute('height')) //2000? Wait.. What?
el is a shorthand of document.getElementById. Can someone explain me what's going on? I suspect that the height property is slightly different than the height attribute: they modified it so it returns the computed style. I'm not sure, because DOM 0 says that the property should be the same as the getAttribute, but the href property of an anchor doesn't match with the getAttribute in most browsers. And:
https://developer.mozilla.org/en/DOM/HTMLImageElement
The HTML:
<img id="strange" src="http://images.devshed.com/fcw/belts/fcw_forums.gif" />
The oddity isn't exaclty were you're spotting it. It comes from the fact that the call to the height attribute as a setter is creating a html height attribute in the img tag, and as far as I know, it's an attribute used only for canvas. There is no connection between this html tag and the dom value.
If i do the following:
strange.style.height = '100px';
strange.height = 2000;
console.log(strange.height); // 100
console.log(strange.style.height); // 100px
the output will be 100 and 100px the height on the DOM is correct. However, using the getAttribute search for the attributes in the html tag, therefor returning "2000".
EDIT
Ok i think i got it
There are 3 different stuff:
The css height, the height attribute, the height DOM value.
The easiest is the DOM value. It always return the img real height in css pixel. If set trhough css, it will be based on the css value, if set through attribute, it will be calculated from that.
Now the two other.
They both specify the img dimension. But the css value as precedence over the HTML attribute.
This is stated in the w3 recommandation. I quote
For
Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
It's stated that
If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic height, then that intrinsic height is the used value of 'height'.
Therefore, img (who are inline-block element I think) use the height css value, but if this one is set to auto (and it's the default) it uses the intrinsic height. And that is the html attribute.
So calling strange.height as a getter gets the DOM value, and as a setter, it sets the HTML attribute.
EDIT2 And to answer more exactly, you have 3 basic rules:
CSS prevails over attribute
DOM should be the same as attribute
DOM reflects the reality (here the real height)
You just can't follow the 3 rules if both CSS and attribute value are specified and differ.
The point is DOM should be the same. Here it can't be if there is CSS, so it has a different value.
As a side note, a nice explanation of the use of the height attribute here: http://reference.sitepoint.com/html/img .
Is there an easy cross-browser way to get computed style of an element in PrototypeJS, without checking document.defaultView... and other properties? ...so that the code looked like
var elt = $$('.xyz')[k],
border = elt.getComputedStyle('border-bottom-width')
PrototypeJs provides getDimensions, -Width, and -Height methods that return computed dimensions, but there's no way to get other computed styles, like borders, backgrounds, etc.
I've found several stand-alone implementations of getComputedStyle, but maybe there's a patch/plugin for PrototypeJS that does that?
Prototype's getStyle method encapsulates most of the cross-browser computed style work you're looking for:
var bgColor = $(element).getStyle('background-color');
From the docs:
This method looks up the CSS property
of an element whether it was applied
inline or in a stylesheet. It works
around browser inconsistencies
regarding float, opacity, which
returns a value between 0 (fully
transparent) and 1 (fully opaque),
position properties (left, top, right
and bottom) and when getting the
dimensions (width or height) of hidden
elements.
However, this method will not return styles applied in a stylesheet in Internet Explorer <= 8, because it uses the getComputedStyle() method, which is the incorrect method for versions 8 and lower: http://www.quirksmode.org/dom/w3c_css.html
Not that I know of.
This is probably because the "get computed style" implementations are so different that it's hardly possible to guarantee uniform results (Which renders them useless for a cross-browser framework).
For example, getting the computed font size cross-browser is not always possible, as I learned in this question.