Как перечислить все атрибуты в одной строке

Question

Как перечислить все атрибуты в одной строке :)

document.getElementById("image").src = "landscape.jpg"; 
document.getElementById("image").width = "300"; 
document.getElementById("image").height = "300"; 

Answer 1

Вы не можете сделать это в одной строке, JavaScript; Вы можете, однако, сокращайте до двух:

document.getElementById("image").src = "http://lorempixel.com/200/200/nightlife/3"; 
document.getElementById("image").width = document.getElementById("image").height = "300"; 

JS Fiddle demo.

Хотя, честно говоря, я не уверен, что вы ничего выиграли.

Конечно, если вы выбираете эффективность (хотя и микро-оптимизации), вы возвращаетесь к трем линиям снова кэшировать результат document.getElementById():

var image = document.getElementById('image'); 
image.src = "http://lorempixel.com/200/200/nightlife/3"; 
image.width = image.height = "300"; 

JS Fiddle demo.

Это возможно в большинстве, если не все браузеры использовать Automagic глобальные переменные, назначенные в браузере, чтобы отобразить ссылку на элемент с id собственности переменной этого имени (элемент с id="image" доступно в соответствии с глобальной переменной image):

image.src = "http://lorempixel.com/200/200/nightlife/3"; 
image.width = image.height = "300"; 

JS Fiddle demo.

Следует, однако, отметить, что, хотя автоматические переменные являются возможными, их использование нецелесообразно: глобальные переменные, особенно в больших кодовых базах или с несколькими вкладчиками, подвержены ошибкам и неправильному использованию. И, как отмечается в комментариях ниже, их использование устарело или может быть устаревшим (ссылка: Do DOM tree elements with ids become global variables?).

Все выше был использован со следующим HTML:

<img src="" id="image" /> 

Answer 2

Использование:

with(document.getElementById("image")) { src = "landscape.jpg"; width = "300"; height = "300"; } 

Или используйте jQuery:

$("#image").attr("src", "landscape.jpg").width(300).height(300); 
// or 
$("#image").attr("src", "landscape.jpg").attr("width": "300").attr("height": "300"); 
// or 
$("#image").attr("src", "landscape.jpg").css({ "width": "300px", "height": "300px" }); 

Answer 3

Вы можете также сохранить переменную белый элемент , поэтому вам не нужно делать document.getElementById каждый раз

var img = document.getElementById("image"); 
img.src = "landscape.jpg"; 
img.width = img.height = "300"; 

вы можете также сделать функция будет иметь возможность в одной строке позже

function setValues(element, props){ 
    for(var key in props){ 
     element[key] = props[key]; 
    } 
} 

setValues(document.getElementById("image"), {src: "landscape.jpg", width:"300", height:"300"}); 

Если вам нужно сделать много йот манипуляций, вы можете взглянуть на рамки, как JQuery и зепто, но это становится излишним, если это единственное, что вам нужно изменить.