I have a div tag with a style attribute, I'm trying to change the value of the style attribute with javascript
i've tried with
document.getElementById("box").style
but still can't modify the --s variable
This is how it was originally:
Html
<div id="box" style="--s:1">
Then i took the style attribute in the js:
Html
<div id="box">
Javascript
document.getElementById("box").style="--s:1"
But still I don't know how can I modify --s with another value of another variable. thank you for your time and for any answers
EDIT:
the code is based on the first answer of this topic:
CSS 360 rotating progress radial using JS
the answer is in this post => CSS 360 rotating progress radial using JS
deg = deg + 10;
ele.style.setProperty("--v", deg+'deg');
you didn't read it correctly !
in your case this is:
document.getElementById("box").style.setProperty("--s", 1);
everything about this question is about CSS custom properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
I have done another sample code usage here: Html & JS rotate image 90 degrees on click
When you access the style property of a DOM object, you are accessing a CSSStyleDeclaration object. You don't set style equal to something. You access properties of that style object (left, color, top, etc.). If you assign a value to style, you wipe out the object stored in that property and instead just make the property hold the string you set it to, which breaks styling functionality.
If you want to change the value of the HTML style attribute (rather than accessing the style DOM property), use the setAttribute method:
document.getElementById("box").setAttribute("style", "--s:1");
try with attributes :
document.getElementById("box").getAttribute("style") // for reading value
document.getElementById("box").setAttribute("style", "background: red;") // for writing
Related
Is there a chance to change zoom value by JS. I'm trying to do something like this:
document.getElementsById("div").style.zoom="150%";
Thanks for help.
I've just found solution. I changed the class.
document.getElementById(div).className = "class";
I have no idea what the zoom property is, but if you want to zoom in a <div>, you should use the css transform:scale(x) property, but you could set this property via js like this:
document.getElementsById("elementId").style.transform ="scale(1.5)";
https://jsfiddle.net/og2tqez3/
you can change the 1.5 value to the amount you want to zoom by, 1.5 means 150%, etc...
however be careful when setting this property with js, because you literally overwrite any other transforms on that element, in that case you should set the old transform value and the zoom value and seperate them with spaces like this:
document.getElementsById("elementId").style.transform ="scale(1.5) transform:translate(0,-50%)";
My bad, so i now know what the zoom property is, but scale is more widely supported and optimal.
Is there a JS way to determine the value in effect for an attribute of an element?
It is well understood that there is a precedence from referenced CSS files in order of declaration through embedded CSS and values defined in the style attribute of an element, with the most recent/most local taking effect.
Browser element inspection tools make it possible to determine the value in effect for an element styling attribute like (for example) background-color.
Is there a way to discover the value in effect programmatically?
I have used a canvas and js to creates what amounts to image maps with hover and click visual feedback, and I would love to make this respond to CSS styling on the canvas.
For example, if the canvas color is set to red then red should be the base color for hover highlights and selection marking.
At the moment this is all done by changing the values of "constants", but responding to CSS would be... elegant.
You can determine the current effective style by using window.getComputedStyle(). It returns an exotic array-like object that has all active style properties as well as some helper functions. To use:
var el = document.getElementById('el1');
var computedStyle = window.getComputedStyle(el);
document.getElementById('style').innerHTML = computedStyle.cssText;
#el1 {
background-color: blue;
}
div:first-of-type {
height: 50px;
}
<div id="el1"></div>
<hr>
<div id="style"></div>
Why don't <section> elements accept width and height attributes just as <canvas> elements do?
(JSFiddle)
This is because section is a direct subelement of HTMLElement whereas Canvas is a HTMLCanvasElement which also extends HTMLElement but adds those 2 properties.
A section element is meant to be styled used CSS (similar to divs) whereas canvas is supposed to more of a HTML + Javascript interaction
I'd never recommend using javascript to style the look and feel of a HTML element, that's why CSS got invented for, right?
If you're really pushed for any reason to use it, then take a look at the js alternative below.
Try declaring the properties as you'd do with a normal HTML element (cross browser way to do it):
section.style.width = '250px';
section.style.height = '250px';
Have a look at this working fiddle.
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.
Suppose I have a div in my page, that doesn't have a width property manually set.
A user can resize his window, and so this div has, visually, a new "size" (dynamic). Is this new size (in px value terms) available somewhere? Like, "div.getCurrentSize" or something like that?
So, is it possible to get this width value from this div using something like javascript?
Look at the jQuery dimensions methods, e.g.
var w = $('#id').width();
Also note that it's not usually possible to obtain the dimensions of any element that's hidden. If you set the display property to none then the dimensions will all read as zero.
outerWidth
Description: Get the current computed width for the first element in the set of matched elements, including padding and border.
How about the standard javascript
(obj).offsetWidth