[javascript] JavaScript를 사용하여 한 번에 요소의 여러 속성 설정

Program / 글쓴이

JavaScript로 한 번에 여러 속성을 설정하려면 어떻게해야합니까? 불행히도이 프로젝트에서 jQuery와 같은 프레임 워크를 사용할 수 없습니다. 지금 내가 가진 것은 다음과 같습니다.

var elem = document.createElement("img");

elem.setAttribute("src", "http://example.com/something.jpeg");
elem.setAttribute("height", "100%");
elem.setAttribute("width", "100%");

답변

도우미 기능을 만들 수 있습니다.

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

다음과 같이 호출하십시오.

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

답변

를 사용 Object.assign(...)하여 생성 된 요소에 속성을 적용 할 수 있습니다 . 자세한 내용은 주석을 참조하십시오.

명심 height하고 width있습니다 속성 픽셀 단위로 정의 하지 퍼센트. CSS를 사용하여 유동적으로 만들어야합니다.

var elem = document.createElement('img')
Object.assign(elem, {
  className: 'my-image-class',
  src: 'https://dummyimage.com/320x240/ccc/fff.jpg',
  height: 120, // pixels
  width: 160, // pixels
  onclick: function () {
    alert('Clicked!')
  }
})
document.body.appendChild(elem)

// One-liner:
// document.body.appendChild(Object.assign(document.createElement(...), {...}))
.my-image-class {
  height: 100%;
  width: 100%;
  border: solid 5px transparent;
  box-sizing: border-box
}

.my-image-class:hover {
  cursor: pointer;
  border-color: red
}

body { margin:0 }

스 니펫 확장

답변

프레임 워크 -esq 구문 ( 참고 : IE 8 이상 지원 만 해당) 을 원하면 Element프로토 타입을 확장하고 고유 한 setAttributes기능을 추가 할 수 있습니다 .

Element.prototype.setAttributes = function (attrs) {
    for (var idx in attrs) {
        if ((idx === 'styles' || idx === 'style') && typeof attrs[idx] === 'object') {
            for (var prop in attrs[idx]){this.style[prop] = attrs[idx][prop];}
        } else if (idx === 'html') {
            this.innerHTML = attrs[idx];
        } else {
            this.setAttribute(idx, attrs[idx]);
        }
    }
};

이렇게하면 다음과 같은 구문을 사용할 수 있습니다.

var d = document.createElement('div');
d.setAttributes({
    'id':'my_div',
    'class':'my_class',
    'styles':{
        'backgroundColor':'blue',
        'color':'red'
    },
    'html':'lol'
});

시도해보세요 : http://jsfiddle.net/ywrXX/1/

호스트 객체를 확장하는 것을 좋아하지 않거나 ( 일부는 반대 ) IE7을 지원해야하는 경우 함수로 사용하십시오.

참고 setAttribute작동하지 않습니다 styleIE에서, 또는 이벤트 핸들러 (당신이하지 어쨌든해야한다). 위의 코드는 style이벤트가 아닌을 처리 합니다.

선적 서류 비치

답변

가변 개수의 인수를받는 함수를 만들 수 있습니다.

function setAttributes(elem /* attribute, value pairs go here */) {
    for (var i = 1; i < arguments.length; i+=2) {
        elem.setAttribute(arguments[i], arguments[i+1]);
    }
}

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

또는 객체에 속성 / 값 쌍을 전달합니다.

 function setAttributes(elem, obj) {
     for (var prop in obj) {
         if (obj.hasOwnProperty(prop)) {
             elem[prop] = obj[prop];
         }
     }
 }

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

자신 만의 체인 가능한 개체 래퍼 / 메서드를 만들 수도 있습니다.

function $$(elem) {
    return(new $$.init(elem));
}

$$.init = function(elem) {
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }
    this.elem = elem;
}

$$.init.prototype = {
    set: function(prop, value) {
        this.elem[prop] = value;
        return(this);
    }
};

$$(elem).set("src", "http://example.com/something.jpeg").set("height", "100%").set("width", "100%");

작동 예 : http://jsfiddle.net/jfriend00/qncEz/

답변

ES5.1 도우미 함수를 코딩 할 수 있습니다.

function setAttributes(el, attrs) {
    Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
}

다음과 같이 호출하십시오.

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

답변

const setAttributes = (el, attrs) =>
  Object.entries(attrs)
    .forEach(args =>
      el.setAttribute(...args))

답변

또는 매개 변수의 속성을 포함하는 요소를 만드는 함수를 만듭니다.

function elemCreate(elType){
  var element = document.createElement(elType);
  if (arguments.length>1){
    var props = [].slice.call(arguments,1), key = props.shift();
    while (key){
      element.setAttribute(key,props.shift());
      key = props.shift();
    }
  }
  return element;
}
// usage
var img = elemCreate('img',
            'width','100',
            'height','100',
            'src','http://example.com/something.jpeg');

참고 : height/width='100%'속성을 사용하여 작동하지 않습니다. 높이 / 너비가 100 % 인 경우 요소가 필요합니다.style.height/style.width