How to modify multiple CSS attributes of an element?


Tags: css,jsoup

Problem :

I have to modify multiple CSS attributes of a web page's elements. For example, I want to modify the links element and I have this code:

        Document doc = Jsoup.connect(url).get();
        Elements links = doc.select("a[href]");

        links.attr("style", "background-color: yellow");
        links.attr("style", "color:green");
        links.attr("style", "font-size: 40px");

My problem is that only the last change is really processed. In this example, that's the the font size. If I delete it, the color change starts working, and so on.

Is there a way to make all those changes in only one method?



Solution :

You're simply putting a string in as the style value, so you can do regular CSS notation:

links.attr("style", "background-color: yellow; color:green; font-size: 40px;");

A better approach might be to simply toggle a CSS class, though:

.myClass {
    background-color: yellow; 
    color: green; 
    font-size: 40px;
}

links.addClass('myClass');

    CSS Howto..

    How to increase checkboxes size with css which work in Google Chrome?

    How do I style my Django forms fields?

    How to make 2 backgrounds “stick” to the sides of a centered div

    How to display 3 buttons on the same line in css

    Keeping content “fixed” under slideshow of different image sizes

    How to crop/cut off an image so it fits the height of the browser window?

    How to adjust button css styles

    How can I change Github markdown background?

    How to reduce font weight in Firefox on Mac with CSS?

    How do I use Stylish to change the font in Google Tasks?

    How to make hero slider go always in the same direction

    How to get Style From jQuery in angular2

    Using CSS, how do you anchor an element to a baseline and size it based on another “pinned” element?

    How to make a css navigation menu “selected” option still clickable

    How to get smooth Google fonts?

    How to write persistent CSS box rules?

    HTML/CSS How to format Text and have an Image floating next to it

    How to enlarge a div without moving other elements

    How to remove jquery mobile button color or override button css?

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    How to stop active effect occurring on all sub menu options from navbar

    how to combine multiple css class selectors for jquery buttonset?

    How to do a best fit vertical align

    How to avoid the text inside the bootstrap button overflow?

    How to make CSS visible only for Android phone UC browser

    Css Drop down menu, how to keep menu infront of content

    how to get text beside image button using CSS

    How to define changing css property based on incrementing class names?

    CSS: How to make element appear from left of the screen?

    How to specify BOTH max-width % and px [closed]