Làm cách nào tôi có thể đặt nhiều kiểu CSS trong JavaScript?

Tôi có các biến JavaScript sau:

var fontsize = "12px"
var left= "200px"
var top= "100px"

Tôi biết rằng tôi có thể đặt chúng thành phần tử của mình lặp đi lặp lại như thế này:

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

Có thể đặt tất cả chúng cùng một lúc, một cái gì đó như thế này?

document.getElementById("myElement").style = allMyStyle 

Nếu bạn có các giá trị CSS dưới dạng chuỗi và không có CSS ​​nào khác được đặt cho phần tử (hoặc bạn không quan tâm đến việc ghi đè), hãy sử dụng thuộc cssTexttính :

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

Điều này là tốt theo một nghĩa nào đó vì nó tránh việc sơn lại phần tử mỗi khi bạn thay đổi một thuộc tính (bạn thay đổi tất cả "cùng một lúc" bằng cách nào đó).

Mặt khác, bạn sẽ phải xây dựng chuỗi đầu tiên.

Sử dụng Object.assign :

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

Điều này cũng cung cấp cho bạn khả năng hợp nhất các kiểu, thay vì viết lại kiểu CSS.

Bạn cũng có thể tạo một chức năng phím tắt:

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}

@Mircea: Rất dễ dàng để đặt nhiều kiểu cho một thành phần trong một câu lệnh. Nó không ảnh hưởng đến các thuộc tính hiện có và tránh sự phức tạp của các vòng lặp hoặc plugin.

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

HÃY CẨN THẬN: Nếu sau này, bạn sử dụng phương pháp này để thêm hoặc thay đổi các thuộc tính kiểu, các thuộc tính trước đó được đặt bằng 'setAttribution' sẽ bị xóa.

Tạo một hàm để chăm sóc nó và truyền tham số cho nó với các kiểu bạn muốn thay đổi ..

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

và gọi nó như thế này

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

đối với các giá trị của các thuộc tính bên trong propertyObject, bạn có thể sử dụng các biến ..

Thư viện JavaScript cho phép bạn thực hiện những việc này rất dễ dàng

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

Đối tượng và vòng lặp for

Hoặc, một phương thức thanh lịch hơn nhiều là một đối tượng cơ bản & vòng lặp for

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}

đặt nhiều thuộc tính kiểu css trong Javascript

document.getElementById("yourElement").style.cssText = cssString;

hoặc là

document.getElementById("yourElement").setAttribute("style",cssString);

Thí dụ:

document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";

document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");

Tôi chỉ vấp ngã ở đây và tôi không hiểu tại sao có quá nhiều mã cần thiết để đạt được điều này.

Thêm mã CSS của bạn dưới dạng một chuỗi.

let styles = `
    font-size:15em;
    color:red;
    transform:rotate(20deg)`

document.querySelector('*').style = styles

a

Bạn có thể có các lớp riêng lẻ trong các tệp css của mình và sau đó gán tên lớp cho phần tử của bạn

hoặc bạn có thể lặp qua các thuộc tính của kiểu như -

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}

Đừng nghĩ rằng nó có thể như vậy.

Nhưng bạn có thể tạo một đối tượng từ các định nghĩa kiểu và chỉ cần lặp qua chúng.

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};

for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

Để phát triển hơn nữa, hãy tạo một chức năng cho nó:

function setStyles(element, styles) {
  for (i in styles)
    element.style[i] = styles[i];
}

setStyles(document.getElementById("myElement"), allMyStyle);

Sử dụng Javascript đơn giản, bạn không thể đặt tất cả các kiểu cùng một lúc; bạn cần sử dụng các dòng duy nhất cho mỗi trong số họ.

Tuy nhiên, bạn không phải lặp đi lặp lại document.getElementById(...).style.mã nhiều lần; tạo một biến đối tượng để tham chiếu nó và bạn sẽ làm cho mã của mình dễ đọc hơn nhiều:

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

...Vân vân. Dễ đọc hơn nhiều so với ví dụ của bạn (và thẳng thắn, dễ đọc như cách thay thế jQuery).

(nếu Javascript đã được thiết kế đúng cách, bạn cũng có thể đã sử dụng withtừ khóa, nhưng đó là cách tốt nhất để riêng, vì nó có thể gây ra một số vấn đề về không gian tên khó chịu)

Đặt cược tốt nhất của bạn có thể là tạo một chức năng tự thiết lập các kiểu:

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}

setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

Lưu ý rằng bạn vẫn sẽ phải sử dụng tên thuộc tính tương thích javascript (do đó backgroundColor)

Xem cho .. trong

Thí dụ:

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}

Đây là chủ đề cũ, vì vậy tôi đã tìm ra cho bất cứ ai đang tìm kiếm một câu trả lời hiện đại, tôi sẽ đề nghị sử dụng Object.keys ();

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};

function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}

myDiv.style = applyInlineStyles(css);

Có những kịch bản sử dụng CSS cùng với javascript có thể có ý nghĩa hơn với một vấn đề như vậy. Hãy xem đoạn mã sau:

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

Điều này chỉ đơn giản là chuyển đổi giữa các lớp CSS và giải quyết rất nhiều vấn đề liên quan đến các kiểu ghi đè. Nó thậm chí làm cho mã của bạn gọn gàng hơn.

Bạn có thể viết một hàm sẽ đặt các khai báo riêng lẻ để không ghi đè lên bất kỳ khai báo hiện có nào mà bạn không cung cấp. Giả sử bạn có danh sách khai báo tham số đối tượng này:

const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

Bạn có thể viết một hàm trông như thế này:

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

trong đó có một elementvà mộtobject danh sách tài sản của tờ khai phong cách để áp dụng cho đối tượng đó. Đây là một ví dụ sử dụng:

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

// styles to apply
const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

// create example paragraph and append it to the page body
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

// when the paragraph is clicked, call the function, providing the
// paragraph and myStyles object as arguments
p.onclick = (ev) => {
  applyStyles(p, myStyles);
}

// this time, target the page body and supply an object literal
applyStyles(document.body, {'background-color': 'grey'});

Tôi nghĩ rằng đây là một cách rất đơn giản liên quan đến tất cả các giải pháp trên:

const elm = document.getElementById("myElement")

const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];

allMyStyle.forEach(({ prop, value }) => {
  elm.style[prop] = value;
});

Sử dụng CSSStyleDeclaration.setProperty()phương thức bên trong Object.entriesđối tượng của kiểu.
Chúng tôi cũng có thể đặt mức độ ưu tiên ("quan trọng") cho thuộc tính CSS với điều này.
Chúng tôi sẽ sử dụng tên thuộc tính CSS "hypen-case".

const styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  "padding": "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const elem = document.getElementById("my_div");

Object.entries(styles).forEach(([prop, val]) => {
  const [value, pri = ""] = val.split("!");
  elem.style.setProperty(prop, value, pri);
});

<div id="my_div"> Hello </div>

Nội bộ bên dưới có hợp lệ không

var styleElement = win.document.createElement("STYLE");
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";

Với ES6 +, bạn cũng có thể sử dụng backticks và thậm chí sao chép css trực tiếp từ một nơi nào đó:

const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
    background-color: rgb(26, 188, 156);
    width: 100px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
`

document.body.append($div)

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>

Chúng ta có thể thêm chức năng kiểu vào nguyên mẫu Node:

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

Sau đó, chỉ cần gọi phương thức kiểu trên bất kỳ Nút nào:

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

Nó sẽ bảo tồn mọi kiểu hiện có khác và ghi đè các giá trị có trong tham số đối tượng.