Получить значение font-size элемента из css
Здравствуйте.
Не нашел в сети, может кто подскажет! Задача: нужно получить значение font-size элемента <p>. Но значение не рассчитанное браузером, а фактически написанное в CSS. Пример кода: <p style="font-size:40px;">просто пример</p> Код:
p {Как мне получить именно вот эти "20px", а не 40? |
Должно помочь https://developer.mozilla.org/en-US/...tComputedStyle
|
нет, getComputedStyle, на сколько мне известно, выдает только рассчитанное браузером значение
|
allasan,
перебором всех правил сss с поиском нужного селектора, рыть cssRules |
рони,
Значит "нормального" способа это сделать нету? :) Ясно, буду искать другое решение. Спасибо! ) |
allasan,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
p {
font-size: 20px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var p = document.querySelector('p'),style = p.getAttribute('style');
p.removeAttribute('style');
var fontSize = window.getComputedStyle(p,null).getPropertyValue("font-size");
p.setAttribute('style', style);
alert(fontSize);
});
</script>
</head>
<body>
<p style="font-size:40px;">просто пример</p>
</body>
</html>
|
рони,
Спасибо. В данном примере работает. Но не совсем то, что мне нужно. Хотелось бы отверткой, а не топором :) Я, видимо, не верно объяснил задачу и привел пример. Скажем, в этом примере: <p>просто пример</p>
p {
font-size: 200%;
}
Ваш код уже не работает. Выводит "32px" вместо "200%", т.е. выводит то, что браузер уже рассчитал, а не то, что написано в стилях. К сожалению, видимо, "приспособленного" решения нет. Буду делать другой вариант. Еще раз спасибо ) |
allasan,
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
font-size: 200%;
}
</style>
</head>
<body>
<span class="fon" onclick="alert(getRules('p')['font-size'])">click me</span>
<script>
function getRules(k) {
for (var e = {}, f = document.styleSheets, c = 0; c < f.length; c++)
for (var a = f[c].cssRules, b = 0; b < a.length; b++)
if (a[b].selectorText == k)
for (var g = a[b].cssText.match(/[-\w]+(?=:)/g) || [], d = 0; d < g.length; d++) {
var h = g[d],
l = h.replace(/-(\w)/g, function(b, a) {
return a.toUpperCase()
});
e[h] = a[b].style[l] }
return e
};
</script>
</body>
</html>
|
рони,
Жестоко ) Но работает! Спасибо большое, постараюсь это применить ) |
| Часовой пояс GMT +3, время: 12:23. |