Форум

allasan · #1 (**permalink**) 18.08.2016, 14:32

Здравствуйте.
Не нашел в сети, может кто подскажет!
Задача: нужно получить значение font-size элемента <p>. Но значение не рассчитанное браузером, а фактически написанное в CSS.

Пример кода:

<p style="font-size:40px;">просто пример</p>

Код:

p {
font-size: 20px;
}

Как мне получить именно вот эти "20px", а не 40?

warren buffet · #2 (**permalink**) 18.08.2016, 14:46

Должно помочь https://developer.mozilla.org/en-US/...tComputedStyle

allasan · #3 (**permalink**) 18.08.2016, 15:08

нет, getComputedStyle, на сколько мне известно, выдает только рассчитанное браузером значение

рони · #4 (**permalink**) 18.08.2016, 15:49

allasan,
перебором всех правил сss с поиском нужного селектора, рыть cssRules

allasan · #5 (**permalink**) 18.08.2016, 15:55

рони,
Значит "нормального" способа это сделать нету?

Ясно, буду искать другое решение. Спасибо! )

рони · #6 (**permalink**) 18.08.2016, 16:10

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>

allasan · #7 (**permalink**) 18.08.2016, 16:24

рони,
Спасибо. В данном примере работает. Но не совсем то, что мне нужно. Хотелось бы отверткой, а не топором

Я, видимо, не верно объяснил задачу и привел пример.
Скажем, в этом примере:

<p>просто пример</p>

p {
font-size: 200%;
}

Ваш код уже не работает. Выводит "32px" вместо "200%", т.е. выводит то, что браузер уже рассчитал, а не то, что написано в стилях.
К сожалению, видимо, "приспособленного" решения нет. Буду делать другой вариант.

Еще раз спасибо )

рони · #8 (**permalink**) 18.08.2016, 16:45

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>

allasan · #9 (**permalink**) 18.08.2016, 16:53

рони,
Жестоко ) Но работает! Спасибо большое, постараюсь это применить )

Форум

Справочник

Discord чат

Курсы javascript