Как получить «объявленное» значение CSS, а не вычисленное значение CSS

Question

Как мы можем использовать JavaScript для получения значения объявленного значения CSS (например, значение, которое появляется при проверке элемента с помощью инспектора Chrome? и поиск в Интернете, кажется, только хочет дать вычисленное значение.

Для моего конкретного случая использования я хочу знать, какая ширина будет в конце перехода CSS, которая задана в таблице стилей, а не inline. Когда я проверяю ширину с помощью JavaScript, я получаю вычисленную ширину, которая на момент извлечения в скрипте находится в начале перехода, поэтому показывает мне 0, хотя в 300 мс это будет объявленная ширина, как 320px .

Answer 1

Я думаю это то, что вы после:

$('#widen').on('click', function(e){ 
 
    $('.example').addClass('wider'); 
 
    
 
    $('#prefetch').text('The div will be: ' + getWidth('wider')); 
 
}); 
 

 
function getWidth(className){ 
 
    for (var s = 0; s < document.styleSheets.length; s++){ 
 
     var rules = document.styleSheets[s].rules || document.styleSheets[s].cssRules; console.log(rules); 
 
     for (var r = 0; r < rules.length; r++){ 
 
      var rule = rules[r]; console.log(rule); 
 
      if (rule.selectorText == '.'+className){ 
 
       console.log('match!'); 
 
       return rule.style.width; 
 
      } 
 
     } 
 
    } 
 
    return undefined; 
 
}

.example { 
 
    width: 100px; 
 
    background-color: #ccc; 
 
    border: 1px solid black; 
 
} 
 
.wider { 
 
    width: 320px; 
 
    -webkit-transition: width 5s; 
 
    -moz-transition: width 5s; 
 
    -o-transition: width 5s; 
 
    transition: width 5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="example">This is a simple container.</div> 
 
<button id="widen" type="button">Widen</button> 
 
<span id="prefetch"></span>

Имейте в виду, я считаю, это еще падает жертвой междоменных предупреждениями (если CSS размещен в CDN/другом домене, вы не сможете получить styleSheet и, следовательно, не сможете получить доступ к возможному ширина.

Answer 2

Посмотрите на transitionend event. Может ли он использоваться для вашего случая использования?

EDIT

Поскольку этот ответ получил upvoted я вставив код ниже.

element.addEventListener("transitionend", function() { 
    // get CSS property here 
}, false); 

Answer 3

Я выбрал наиболее полезный ответ на мой вопрос, но похоже, что решение, которое я искал, не существует. То, что мне было нужно, - это получить ширину элемента в пикселях до того, как переход действительно будет завершен. Эта ширина основана на процентах, поэтому фактическая ширина пикселей будет меняться в зависимости от ряда факторов. То, что я в конечном итоге делает на самом деле было:

• Создание клона JQuery элемента которого мне нужно «конец» измерение перехода.
• Позиционирование клонирования с экрана
• Добавление встроенных стилей в клон, удаление унаследованных свойств перехода CSS, чтобы он сразу получил окончательную/конечную ширину.
• Использование JS, чтобы сохранить конечную ширину переменной
• Удаление клона с .remove JQuery (в)

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

Вот функция, которая делает то, что я описал выше.

var getTransitionEndWidth = function($el) { 
    $('body').append('<div id="CopyElWrap" style="position:absolute; top:-9999px; opacity:0;"></div>'); 
    var copyEl = document.createElement('div'); 
    var $copy = $(copyEl); 
    var copyElClasses = $el.attr('class'); 

    $copy.attr('class', copyElClasses).css({ 
     WebkitTransition: 'all 0 0', 
     MozTransition: 'all 0 0', 
     MsTransition: 'all 0 0', 
     OTransition: 'all 0 0', 
     transition: 'all 0 0' 
    }).appendTo($('#CopyElWrap')); 
    var postWidth = $copy.width(); 
    $('#CopyElWrap').remove(); 
    return postWidth; 
};