С тех пор как в Chrome Stable появилась версия 33.0.1750.117, логика window.getComputedStyle изменилась по сравнению с другими браузерами. Код ниже: http://jsfiddle.net/HD4bD/17/
Может ли кто-нибудь объяснить, что изменилось и каково «правильное» решение по этому поводу?
Учитывая следующее:
HTML
<body>
<div class="normal"></div>
<div class="display-none"></div>
<div class="visibility-hidden"></div>
</body>
CSS
.normal:before {
content: "NORMAL: "
}
.display-none:before {
content: "DISPLAY-NONE: ";
display: none;
}
.visibility-hidden:before {
content: "VIS-HIDDEN: "
visibility: hidden;
}
JS
var $ = document.querySelector.bind(document),
pass = "This text should have 1 or more labels before it",
fail = "The label is missing. Something's wrong.",
normalContent = getB4Content('.normal'),
dNoneContent = getB4Content('.display-none'),
vHideContent = getB4Content('.visibility-hidden');
function getB4Content(selector){
return window.getComputedStyle($(selector),':before').getPropertyValue('content');
}
$('.normal').innerHTML = normalContent === '' ? fail : normalContent + pass;
$('.display-none').innerHTML = dNoneContent === '' ? fail : dNoneContent + pass;
$('.visibility-hidden').innerHTML = vHideContent === '' ? fail : vHideContent + pass;
ВЫХОД
Firefox v27:
НОРМАЛЬНОЕ: "НОРМАЛЬНОЕ: "Этот текст должен иметь 1 или более меток перед ним
" DISPLAY-NONE: "Этот текст должен иметь 1 или более меток перед ним
noneЭтот текст должен иметь 1 или более меток перед ним
IE 11 NORMAL: "NORMAL: "Этот текст должен иметь 1 или более меток перед ним
" DISPLAY-NONE: "Этот текст должен иметь 1 или более меток перед ним
noneЭтот текст не должен иметь 1 или более ярлыков перед ним
Chrome v33
НОРМАЛЬНОЕ: "НОРМАЛЬНОЕ: "Этот текст должен иметь 1 или более ярлыков перед ним
Ярлык отсутствует. Что-то не так.
Ярлык отсутствует. Что-то не так.
