How to Set Multiple CSS Style Properties in Typescript for an Element

how to set multiple CSS style properties in typescript for an element?

Try using setAttribute. TypeScript does not have the style property on Element.

element.setAttribute("style", "color:red; border: 1px solid blue;");

Some related discussion in this GitHub issue:
https://github.com/Microsoft/TypeScript/issues/3263

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.

Angular ngStyle for multiple styles

When you using ngStyle you should create a function returning one of the following: a string, an array or an object.

if you want to return an Object you do the following:

in your template:

<div [ngStyle]="styleObject()"></div>

in your component:

export class AppComponent{
 styleObject(): Object {
       if (/** YOUR CONDITION TO SHOW THE STYLES*/  ){
           return {height: this.height,width: this.width}
       }
       return {}
   }
}

Binding click event with multiple css style in Angular

You can define two different state objects :

export class AppComponent {
  baseState = {
    style1: true,
    style2: true
  }
  activeState = {
    style1: false,
    style2: false
  }
  active = false;
}

HTML

<div class="mainbody" [ngClass]="active ? activeState : baseState">
  <button (click)="active = !active">Submit</button>
</div>

using css modules how do I define more than one style name

You can add multiple classes using css modules as follows:

className={`${styles.description} ${styles.yellow}`}

e.g.

function Footer( props) {
    return (
        <div className={styles.footer}>
            <div className={`${styles.description} ${styles.yellow}`}>
              <p>this site was created by me</p>
            </div>
        </div>
    );
}

Using react-css-modules you can use normal class name syntax:

<div styleName='description yellow'>

and you specify allowMultiple: true for multiple classes

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>

JavaScript CSS how to add and remove multiple CSS classes to an element

Try doing this...

document.getElementById("MyElement").className += " MyClass";

Got this here...

Setting multiple attributes for an element at once with JavaScript

You could make a helper function:

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

Call it like this:

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});

---

Related Topics