Setting Multiple Style.Background Values

Setting multiple style.background values

I think just about your only real option is to clear the property, grab the value after clearing it, then repeatedly set it until it no longer has that value, like this:

function setPrefixedValue(elm, prop, value) {
    var prefixes = ['-moz-', '-webkit-', '-o-', '-ms-', '-khtml-'];
    var i, v, starting;

    // Clear
    elm.style[prop] = "";
    starting = elm.style[prop];

    // Try raw first
    try {
        elm.style[prop] = value;
        if (elm.style[prop] !== starting) {
            console.log("No prefix");
            return;
        }
    }
    catch (e) {
    }

    // Try prefixes
    for (i = 0; i < prefixes.length; ++i) {
        v = prefixes[i] + value;
        try {
            elm.style[prop] = v;
            if (elm.style[prop] !== starting) {
                console.log("Prefix: " + prefixes[i]);
                return;
            }
        }
        catch (e2) {
        }
    }

    console.log("Didn't find prefix");
}

// Usage
setPrefixedValue(someElement, "background", "linear-gradient(red, blue)");

Live Example | Source

---

Side note: I tested various versions of Chrome, Firefox, Opera, and IE. I didn't find a browser that appeared to support that linear-gradient value, but required a prefix. Recent Chrome and Firefox; Opera 12.15; and IE10 all support it without any prefix; Opera 10.62, IE8, and IE9 didn't support it either prefixed or not. (For IE8 and 9, I think you need to use a filter instead.)

Assigning multiple styles on an HTML element

In HTML the style attribute has the following syntax:

style="property1:value1;property2:value2"

so in your case:

<h2 style="text-align:center;font-family:tahoma">TITLE</h2>

Hope this helps.

Apply multiple styles with .style() method in D3.js

Edit (2021):

Note: I claimed (in initial version of this answer) that there's no embedded method to solve the OP's problem. And, as of D3 v6.7.0 you still cannot pass your styles as an object directly to .style() method

Two options you got by the time of this writing:

• loop through your styles object and apply the styles incrementally

const style = {"width":"100px","height":"100px","background-color":"lightgreen"}

Object.entries(style).forEach(([prop,val]) => d3.select("#test").style(prop,val))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="test"></div>

How can I set multiple CSS styles in JavaScript?

If you have the CSS values as string and there is no other CSS already set for the element (or you don't care about overwriting), make use of the cssText property:

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

You can also use template literals for an easier, more readable multiline CSS-like syntax:

document.getElementById("myElement").style.cssText = `
  display: block; 
  position: absolute;
`;

This is good in a sense as it avoids repainting the element every time you change a property (you change them all "at once" somehow).

On the other side, you would have to build the string first.

multiple style values inside a view

You can't. You will have to create a style which combines the two styles. (Or create just one style that inherits from one of your styles, and add the extra data of the second style).

How to define multiple styles on div in .html template Angular

use the ngStyle tag

<div   [ngStyle]="{'background-image':'url( orderItem.product.imgUrl )', 'background-repeat':' no-repeat','background-size': 'cover','background-position': 'center, center' }"  class="order-img"  ></div>

Demo

Add Multiple Styles with JavaScript

Here is a fiddle.

document.getElementById("id1").setAttribute(
       "style", "color: red; background-color: beige; padding-bottom: 2px; margin: 3px;");

---

Related Topics