How do I change a specific css element with javascript?


Tags: javascript,css,user-interface,web

Problem :

Any advice would be much appreciated, I'm sure this is simple for some of you web wizards. Thank you very much for your time.

I have some css that is working to change the revealed portion of .png when a user hovers over it:

.small_icons ul li.companyButton .circle {background-position:0 0;}
.small_icons ul li.companyButton:hover .circle {background-position:0 -56px;}

I'd like to then keep the position at 0 -56px when the user clicks on the image and switch back to 0 0 when the user clicks on a different image. This is all happening on the same page so I imagine I have to use a javascript onclick function.

I can't seem to figure out how to access that specific css element using javascript. I've tried:

document.getElementByClass("circle").style.background-position:0 -56px;

but that doesn't change anything. Is it because .circle is a child class of .companyButton which is a child class of .small_icons?

Many thanks!



Solution :

You messed with type

document.getElementsByClass("circle") is Nodelist (object like array). so you should loop through it, or use

 document.getElementsByClass("circle")[0].style.background-position="0 -56px";

to loop through you need

var circles=document.getElementsByClass("circle")
for (var index=0;index<circles.length;index++) {
  circles[index].style.background-position="0 -56px";
}

more about dinamyc styling


    CSS Howto..

    How to overwrite css style in a specific page?

    How to lazyload svg image given in css?

    How to create a tiled background button using CSS

    How do I set dynamic width to a block element?

    How to make a smooth dashed border rotation animation like 'marching ants'

    How to style parent li elements of headers using CSS?

    How Do I Add product descriptions (short) to hover box in woocommerce?

    How to center the image source within an image tag?

    jQuery - How to show element when another has a value

    How can I hide a DIV without using CSS?

    How do I keep dropdown menus the same width of top level categories with auto width

    How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically

    How do you transition a height without the element going outside the parents border?

    How to target element inside iframe from css or javascript for styling

    How can I centre an unordered list of floated items to the page

    How to make a visible rectangular frame in CSS to contain some sections of my view?

    CSS: How to put content between header and footer

    How to offset div columns in CSS grid system

    How to move this structure to the right without using float?

    How to reference nested classes with css?

    How to highlight anchor link when target div comes in view - jQuery

    Li tag is not aligning correctly in Chrome. How to fix it?

    How to pop out an image inside a ul li div when the css surrounding it won't let you

    How to give shadow to a border

    AngularJS ng-show animation cross-fade inside ng-repeat

    My jquery slideshow is not functioning properly

    How to check if all CSS files have been downloaded to insert HTML using JavaScript?

    How do I apply a style to all children of an elements

    How to display a div next to another div with no width defined?

    How to make 2 divs on 1 side (up&down)