ฉันจะตั้งค่าสไตล์ CSS หลายแบบใน JavaScript ได้อย่างไร

ฉันมีตัวแปร JavaScript ต่อไปนี้:

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

ฉันรู้ว่าฉันสามารถตั้งค่าให้องค์ประกอบของฉันซ้ำแล้วซ้ำอีกเช่นนี้:

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

เป็นไปได้ไหมที่จะรวมพวกมันทั้งหมดพร้อมกัน

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

หากคุณมีค่า CSS เป็นสตริงและไม่มี CSS อื่นที่ตั้งค่าไว้แล้วสำหรับองค์ประกอบ (หรือคุณไม่สนใจเกี่ยวกับการเขียนทับ) ให้ใช้cssTextคุณสมบัติ :

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

สิ่งนี้เป็นสิ่งที่ดีเพราะจะหลีกเลี่ยงการทาสีองค์ประกอบทุกครั้งที่คุณเปลี่ยนคุณสมบัติ (คุณเปลี่ยนพวกเขาทั้งหมด "ในครั้งเดียว" อย่างใด)

ในอีกด้านหนึ่งคุณจะต้องสร้างสตริงก่อน

ใช้Object.assign :

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

สิ่งนี้ยังช่วยให้คุณสามารถผสานสไตล์แทนที่จะเขียนสไตล์ CSS ใหม่

คุณยังสามารถสร้างฟังก์ชั่นทางลัด:

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

@Mircea: มันง่ายมากที่จะตั้งหลายสไตล์สำหรับองค์ประกอบในคำสั่งเดียว ไม่ส่งผลกระทบต่อคุณสมบัติที่มีอยู่และหลีกเลี่ยงความซับซ้อนในการไปใช้ลูปหรือปลั๊กอิน

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

ใช้ความระมัดระวัง: หากในภายหลังคุณใช้วิธีนี้เพื่อเพิ่มหรือแก้ไขคุณสมบัติของสไตล์คุณสมบัติก่อนหน้านี้ที่ตั้งค่าโดยใช้ 'setAttribute' จะถูกลบ

สร้างฟังก์ชั่นเพื่อดูแลและส่งผ่านพารามิเตอร์ที่มีสไตล์ที่คุณต้องการเปลี่ยน ..

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

และเรียกมันว่าสิ่งนี้

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

สำหรับค่าของคุณสมบัติภายใน propertyObject คุณสามารถใช้ตัวแปร ..

ไลบรารี JavaScript ช่วยให้คุณทำสิ่งเหล่านี้ได้อย่างง่ายดาย

jQuery

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

วัตถุและ for-in-loop

หรือวิธีที่สวยงามกว่านี้ก็คือวัตถุพื้นฐาน & for-loop

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

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

ตั้งค่าคุณสมบัติสไตล์ CSS หลายรายการใน Javascript

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

หรือ

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

ตัวอย่าง:

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

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

ฉันเพิ่งสะดุดที่นี่และฉันไม่เห็นว่าทำไมต้องมีรหัสจำนวนมากเพื่อให้บรรลุนี้

เพิ่มรหัส CSS ของคุณเป็นสตริง

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

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

a

คุณสามารถมีคลาสส่วนตัวในไฟล์ css ของคุณแล้วกำหนด classname ให้กับองค์ประกอบของคุณ

หรือคุณสามารถวนซ้ำคุณสมบัติต่างๆของสไตล์เป็น -

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

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

อย่าคิดว่าเป็นไปได้เช่นนี้

แต่คุณสามารถสร้างวัตถุออกมาจากคำจำกัดความสไตล์และเพียงแค่วนรอบพวกเขา

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

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

หากต้องการพัฒนาเพิ่มเติมให้สร้างฟังก์ชั่นสำหรับมัน:

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

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

เมื่อใช้ Javascript ธรรมดาคุณจะไม่สามารถกำหนดสไตล์ทั้งหมดได้ในครั้งเดียว คุณต้องใช้บรรทัดเดียวสำหรับแต่ละบรรทัด

อย่างไรก็ตามคุณไม่จำเป็นต้องทำซ้ำdocument.getElementById(...).style.รหัสซ้ำแล้วซ้ำอีก สร้างตัวแปรอ๊อบเจคเพื่ออ้างอิงและคุณจะทำให้โค้ดของคุณอ่านง่ายขึ้นมากขึ้น:

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

... ฯลฯ อ่านง่ายกว่าตัวอย่างของคุณมาก (และตรงไปตรงมาอ่านง่ายเหมือน jQuery ทางเลือก)

(หาก Javascript ได้รับการออกแบบอย่างถูกต้องคุณสามารถใช้withคำหลักได้เช่นกัน แต่เป็นวิธีที่ดีที่สุดเพราะอาจทำให้เกิดปัญหาเนมสเปซที่น่ารังเกียจ)

ทางออกที่ดีที่สุดของคุณอาจเป็นการสร้างฟังก์ชั่นที่กำหนดสไตล์ของคุณเอง:

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});

โปรดทราบว่าคุณจะต้องใช้ชื่อคุณสมบัติที่เข้ากันได้กับจาวาสคริปต์ (ดังนั้นbackgroundColor)

ดู.. ใน

ตัวอย่าง:

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];
}

นี่เป็นเธรดเก่าดังนั้นฉันจึงคิดว่าใครที่กำลังมองหาคำตอบที่ทันสมัยฉันขอแนะนำให้ใช้ 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);

มีบางสถานการณ์ที่การใช้ CSS ควบคู่ไปกับจาวาสคริปต์อาจทำให้เข้าใจปัญหาได้ง่ายขึ้น ดูรหัสต่อไปนี้:

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

สิ่งนี้จะสลับไปมาระหว่างคลาส CSS และแก้ไขปัญหามากมายที่เกี่ยวข้องกับสไตล์การเอาชนะ มันทำให้รหัสของคุณดูเป็นระเบียบมากขึ้น

คุณสามารถเขียนฟังก์ชั่นที่จะตั้งค่าการประกาศแยกต่างหากเพื่อไม่ให้เขียนทับการประกาศที่มีอยู่ซึ่งคุณไม่ได้ให้ไว้ สมมติว่าคุณมีรายการพารามิเตอร์ object ของการประกาศ:

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]);
  }
};

ซึ่งใช้เวลาelementและobjectรายการคุณสมบัติของการประกาศสไตล์เพื่อใช้กับวัตถุนั้น นี่คือตัวอย่างการใช้งาน:

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'});

ฉันคิดว่านี่เป็นวิธีที่ง่ายมากเกี่ยวกับการแก้ปัญหาทั้งหมดข้างต้น:

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;
});

ใช้CSSStyleDeclaration.setProperty()วิธีการภายในObject.entriesวัตถุสไตล์
นอกจากนี้เรายังสามารถกำหนดลำดับความสำคัญ ("สำคัญ") สำหรับคุณสมบัติ CSS ด้วยสิ่งนี้
เราจะใช้ชื่อคุณสมบัติ 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>

เป็น InnerHtml ด้านล่างที่ถูกต้อง

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

ด้วยES6 +คุณสามารถใช้backticksและแม้แต่คัดลอก css โดยตรงจากที่อื่น:

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>

เราสามารถเพิ่มฟังก์ชั่นสไตล์เพื่อต้นแบบ Node:

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

จากนั้นเพียงเรียกเมธอดสไตล์บนโหนดใด ๆ :

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

มันจะรักษารูปแบบที่มีอยู่อื่น ๆ และเขียนทับค่าที่มีอยู่ในพารามิเตอร์วัตถุ