Вопрос по html, jquery, javascript, width, css – jquery -Get значения свойств CSS для еще не примененного класса

9

у меня такой жевопрос спросил здесь (не смог прокомментировать, возможно, у меня нет привилегий), я хочу получить значение ширины CSS, определенное в таблице стилей, но еще не примененное ни к одному элементу в dom, (его загрузочное CSS с сеткой с отзывчивыми медиа-запросами)

 .span6 {
 width: 570px;
 }

Однако решение, представленное в вышеупомянутом вопросе, возвращает 0, т.е.

$('<div/>').addClass('span6').width();

но работает, если я делаю что-то подобное

 $('<div/>').addClass('span6').hide().appendTo('body').width();

любой простой способ без добавления этого div?

@MoinZaman Я хочу сделать некоторые манипуляции, прежде чем решить, нужно ли добавлять конкретный класс или нет, в div есть изображение, его ширина может быть любой Jaideep Singh
Почему ты хочешь это сделать? Может быть, есть альтернативный / более простой способ решить вашу проблему? Moin Zaman
Если вы ДЕЙСТВИТЕЛЬНО (действительно) хотите избежать вставки элемента, вы можете создать карту с нужной вам шириной: p leopic
В прошлый раз я видел & quot; получить свойства стиля с помощью jquery & quot; вопрос закончился с некоторым регулярным выражением в качестве принятого ответа, я думаю, что ваше текущее решение достаточно простое. Вы могли бы позвонить.remove() очистить DOM после получения желаемого значения свойства CSS или всегда иметьdisplay:none элемент для применения CSS и получения значения, впоследствии удаляя примененный класс CSS. Fabrício Matté
возможный дубликатGet CSS properties values for a not yet applied class - Я был автором оригинала «плохо». ответ, который с тех пор был обновлен с дополнительной информацией. Bobby Jack

Ваш Ответ

2   ответа
4

чтобы помочь с более сложными селекторами CSS.

var getCSS2 = function (prop, fromClass, $sibling) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    if($sibling != null){
        $sibling.after($inspector); //append after sibling in order to have exact 
    } else {
        $("body").append($inspector); // add to DOM, in order to read the CSS property
    }
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

JSFiddle

28

вам нужно динамически вставить скрытый элемент в DOM, прочитать свойство и, наконец, удалить его:

var getCSS = function (prop, fromClass) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    $("body").append($inspector); // add to DOM, in order to read the CSS property
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

jsFiddle здесь

Это в основном то, что делает OP -.css('display', 'none') практически так же, как.hide(), но +1 за расширение его до полезной функции иfinally блок, который запускается "после"return.
может быть, это единственный простой способ сделать это с помощью «меньше писать и делать больше jquery» :П Jaideep Singh
@AlexFilipovici Вы должны делать что-то не так. Вы можете увидеть здесь, что работает отлично.jsfiddle.net/cVfFc/1
Вы правы, в моем пути к файлу CSS была опечатка.
Я пробовал это дляbackground-position, но он возвращается0% 0% вместо фактической стоимости ...

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