Is it possible to manipulate CSS properties of an HTMLElement in JavaScript?

JavaScript
1

I use “Chrome” developer tools JavaScript console a lot to experiment dynamically with different properties and execute different JavaScript methods, etc, directly in the console.

I want to know how I can set CSS properties on HTMLElements directly on the elements without using the .style CSSStyleDeclaration object. Is this even possible?

I have tried changing the .offsetLeft property to dynamically move a <div></div> on the page to see the effects but when I try changing the value it doesn’t change and, of course, the HTMLDivElement doesn’t move on screen. How do I manipulate these CSS properties on these HTMLElements in real-time through the JavaScript console without going through the .style CSSStyleDeclaration object. I guess that’s the best way I can phrase my question. I hope my question can be understood.

Thanks for the help.

P.S. I have used the .css method in jQuery to do this but I want to know if it can be in regular JavaScript code. Not jQuery. Thanks.

2

Hi, why don’t you want to use the style attribute?

offsetLeft is a read only method that is calculated each time it’s called, style properties are only set when you change them.

If you’re using a positioned element you could move it by changing the top and left values
element.style.left = ‘100px’

Or if it’s not positioned you’ll need to use something like margin
element.style.marginLeft = ‘100px’

You can only set properties that exist in CSS.

3

Thank you for your response. I need to refine my first question. F12 in Chrome shows a section of CSS properties in a node tree called “Computed Style”. Using that node tree(is that the right word) I can see every single CSS property on a selected element. Now, my question is, how can I see all those same properties using JavaScript code. When I look at the “element.style” object all it shows is empty strings. That’s the reason I don’t want to see or use the element.style object. That’s only showing me properties that have been set “inline”. I want to be able to see all those properties I can see in the Chrome “Computed Style” node tree using JavaScript notation. How do I do that? If I wanted to view or modify the zIndex property on any HTMLElement object what would the JavaScript code be?

var tempDIV = document.querySelector(‘div’);
console.log(tempDiv.zIndex);

This code doesn’t work. The element.style object doesn’t show the “Computed Style” values, only values that are actually set inline. So where in the world are all these “Computed Style” CSS properties at? They gotta be attached to the HTMLElement somewhere, right? jQuery knows how to find. I just wanna know how to see them for myself.

4

Computed Styles are read only, so you can’t set them.

All setting of css properties has to be done through the style property.

IE8 and lower have el.currentStyle and other browsers have a getComputedStyle function.

el = document.getElementById('example')
styles = null
if (el.currentStyle) {
  styles = el.currentStyle
}
else {
  styles = getComputedStyle(el)
}
5

Thank you for your reply once again. Very helpful information. I guess I will be using the element.style object to dynamically manipulate the elements then. I just thought there was a more direct way. It seems I was wrong. :slight_smile:

6

I think I know what caused my confusion about looking for a more direct way to manipulate CSS properties on an HTMLElement versus going through the element.style object. What confuses me is the fact that some CSS properties like ‘left’ and ‘top’ are top-level properties of any HTMLElement. So my thinking was that since the ‘left’ and ‘top’ CSS properties were visible at the top-level surely they must be editable at the top-level as well.

Why would the developers of JavaScript show only these 2 CSS properties at the top-level of any HTMLElement? I can see some value in it because they directly correlate to the value of your elements position setting. But you can’t even see the CSS ‘position’ property at the top level of an HTMLElement. So, unless I am mistaken, 2 out of about 276 CSS properties are viewable at the top-level of an HTMLElement. Why is this? It seems somewhat inconsistent other than some developers idea that he would need to know these two properties more than any of the other CSS properties and therefore decided to place ‘shortcut’ views at the top-level of the HTMLElement properties instead of keeping them all in the element.style object.