плагин CSS jQuery, который возвращает вычисленный стиль элемента к псевдо клону тот элемент?

Я ищу способ использовать jQuery для возврата объекта вычисленных стилей для 1-го подобранного элемента. Я мог тогда передать этот объект другому вызову css метода jQuery.

Например, с шириной, я могу сделать следующее, чтобы заставить эти 2 отделения иметь ту же ширину:

$('#div2').width($('#div1').width());

Было бы хорошо, если я мог бы заставить ввод текста быть похожим на существующий промежуток:

$('#input1').css($('#span1').css());

куда .css () без аргумента возвращает объект, который может быть передан .css (obj).

(Я не могу найти плагин jQuery для этого, но кажется, что это должно существовать. Если это не будет существовать, то я поверну мой ниже в плагин и отправлю его со всеми свойствами, которые я использую.)

В основном я хочу к псевдо определенным элементам клона, но использую другой тег. Например, у меня есть элемент лития, что я хочу скрыть и поместить входной элемент по нему, который выглядит одинаково. Когда пользователь вводит, похоже, что они редактируют встроенный элемент.

Я также открыт для других подходов для этой псевдо проблемы клонирования для редактирования. Какие-либо предложения?

Вот то, что я в настоящее время имею. Единственная проблема просто получает все возможные стили. Это могло быть смехотворно длинным списком.


jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var attr = ['font-family','font-size','font-weight','font-style','color',
    'text-transform','text-decoration','letter-spacing','word-spacing',
    'line-height','text-align','vertical-align','direction','background-color',
    'background-image','background-repeat','background-position',
    'background-attachment','opacity','width','height','top','right','bottom',
    'left','margin-top','margin-right','margin-bottom','margin-left',
    'padding-top','padding-right','padding-bottom','padding-left',
    'border-top-width','border-right-width','border-bottom-width',
    'border-left-width','border-top-color','border-right-color',
    'border-bottom-color','border-left-color','border-top-style',
    'border-right-style','border-bottom-style','border-left-style','position',
    'display','visibility','z-index','overflow-x','overflow-y','white-space',
    'clip','float','clear','cursor','list-style-image','list-style-position',
    'list-style-type','marker-offset'];
    var len = attr.length, obj = {};
    for (var i = 0; i < len; i++) 
        obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
    return obj;
}

Править: Я теперь использовал код выше некоторое время. Это работает хорошо и ведет себя точно как исходный css метод за одним исключением: если 0 args передаются, это возвращает вычисленный объект стиля.

Как Вы видите, это сразу называет исходный css метод, если это так, который применяется. Иначе это получает вычисленные стили всех перечисленных свойств (собранный из вычисленного списка стилей Firebug). Хотя это получает длинный список значений, это довольно быстро. Надежда это полезно для других.

67
задан Keith Bentrup 21 June 2009 в 07:26
поделиться

2 ответа

Это не jQuery, но в Firefox, Opera и Safari вы можете использовать window.getComputedStyle (element) для получения вычисленных стилей для элемента и в IE <= 8 вы можете использовать element.currentStyle . Возвращаемые объекты в каждом случае разные, и я не уверен, насколько хорошо они работают с элементами и стилями, созданными с помощью Javascript, но, возможно, они будут полезны.

В Safari вы можете сделать следующее, что довольно изящно :

document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;
22
ответ дан 24 November 2019 в 14:41
поделиться

Теперь, когда у меня было время разобраться в проблеме и лучше понять, как работает внутренний метод css jQuery, то, что я опубликовал, похоже, работает достаточно хорошо для случая использования, о котором я упоминал .

Было предложено решить эту проблему с помощью CSS, но я думаю, что это более обобщенное решение, которое будет работать в любом случае без необходимости добавлять классы удаления или обновлять CSS.

Я надеюсь, что другие найдут его полезно. Если вы обнаружите ошибку, сообщите мне.

4
ответ дан 24 November 2019 в 14:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: