css/jquery - извлечение всех значений полей элемента в одну переменную

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

есть ли короткий способ выполнения этой серии jquery ниже, чтобы извлечь каждое значение поля.

 var x = jQuery('#widget-container').css('margin-top');
var y = jQuery('#widget-container').css('margin-bottom');
var z = jQuery('#widget-container').css('margin-right');
var a = jQuery('#widget-container').css('margin-left');

Ответ №1:

Вы можете использовать margin css напрямую, чтобы получить top, right, bottom and left поля соответственно.

 var margin = jQuery("#widget-container").css("margin");
alert(margin);

ДЕМОНСТРАЦИЯ

Редактировать : приведенный выше jQuery может работать, а может и не работать в firefox, потому что, если свойство css (в данном случае margin) не задано в css элемента явно, оно не поддерживает сокращенный css для этого свойства. Чтобы добиться того же в Firefox, мы можем выполнить следующий обходной путь :

 var marginArray = ['Top','Right','Bottom','Left'];

for(var i=0;i<marginArray.length;i  )
{
    alert(jQuery("#widget-container").css("margin" marginArray[i]));
}

JSFiddle для Firefox

1. Это не работает, когда каждое поле задано отдельно.

2. вы проверяли мой jsfiddle?

3. Я вижу это. он не отображает никакого значения полей.

4. Отображается ’10px 30px 40px 20px’ .. какой браузер вы используете. И, как сказал @AnoopJoshi, можете ли вы поделиться скриптом, который не работает с отдельным полем?

5. @BhushanKawadkar Подумайте, если у вас есть целые значения полей, как бы вы распределили их по конкретным переменным.

Ответ №2:

Вы можете сделать что-то вроде этого,

 var =$("#widget-container").css("margin").split(" ");

Возвращаемое значение будет в следующем порядке: top, right, bottom, left в массиве.

Скрипка

1. Это не работает, когда каждое поле задано отдельно.

2. @jacelysh ты вообще проверял скрипку?

3. Оно возвращает значение только при использовании сокращения «margin».

4. @jacelysh Можете ли вы создать скрипку, в которой есть доказательство того, что «Это не работает, когда каждое поле задано отдельно»

5. Это не гарантирует работу во всех браузерах. Из API : «Извлечение сокращенных свойств CSS (например, margin, background, border), хотя они и работают в некоторых браузерах, не гарантируется». И даже в браузерах, которые его поддерживают, он может возвращать сокращение из двух значений. Попробуйте с Chrome: jsfiddle.net/ubBSp/7