How to change css of element using jquery


Tags: jquery,html,css

Problem :

I have defined a CSS property as

#myEltId span{
  border:1px solid black;
}

On clicking a button, I want to remove its border.

$('#button1').click(function() {
  // How to fetch all those spans and remove their border
});


Solution :

Just use:

$('#button1').click(
    function(){
        $('#myEltId span').css('border','0 none transparent');
    });

Or, if you prefer the long-form:

$('#button1').click(
    function(){
        $('#myEltId span').css({
            'border-width' : '0',
            'border-style' : 'none',
            'border-color' : 'transparent'
        });
    });

And, I'd strongly suggest reading the API for css() (see the references, below).

References:


    CSS Howto..

    how to align the content to center of page using css

    Shadow-Piercing descendant combinator, '/deep/' , including '::shadow' pseudo elements, are being deprecated so how do we pierce the Shadow DOM?

    How to set parent div height to self adapt to the inner div height?

    Trying to align text with background image. If below a certain resolution the text to the left moves in. How can I fix this?

    How to disable JS function via CSS for certain page?

    How can I get Sitecore Field Renderer to use a css class for an image

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How to ignore CSS img styling for certain sections of the website?

    How to make this breed of resizable vertical divider for two divs?

    How can I make two divs stack whilst still having my text wrap without media queries

    How to place text over different images with different positions?

    How to wrap table cell at a maximum width in full width table

    How to use a divider in a navigation with list elements?

    How do I vertical center text next to an image in html/css?

    How to understand CSS Background-Position coordinates

    How to create a 3 column (ul, li) header that (responsive) collapse one below another?

    How do I specify another width for newly added divs in javascript

    How to change value of class in another class?

    How to write CSS in Vaadin 6?

    How to hide div on swipe in Angular

    How to divide 3 divs(CSS + MVC)

    How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

    how to give css height a percentage of a different div (above original div)

    How can I center a logo and place the links left and right on the navbar using bootstrap?

    Using two buttons on one div, how do you fade in slowly then fade out?

    How to write regular expressions in CSS

    how to animate width and height 100% using css3 animations?

    How do I selectively stack columns with twitter bootstrap

    How to add CSS style to focused anchor in HTML

    How to set position of checkbox to middle of td and input type text using css? [duplicate]