SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    Last edited by ig-88; Dec 4, 2012 at 15:51. Reason: because I can

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by ig-88; Dec 4, 2012 at 16:16. Reason: To quote the bad guy in 8MM, "Because he could".

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

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

    https://developer.mozilla.org/en-US/...tComputedStyle

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •