Блог

Главная - Вопросы по программированию - Как извлечь атрибуты css из

Как извлечь атрибуты css из

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь выяснить, как извлекать атрибуты из CSS для использования в Javascript. Я так много раз гуглил то, что искал, и во многих отношениях мои пальцы вот-вот отвалятся.

Я хочу изменить размер шрифта на три разных размера шрифта: 15 пикселей, 28 пикселей и 40 пикселей. Это будет переключаться с помощью трех кнопок. Однако, когда вы выбираете размер шрифта, некоторые другие атрибуты CSS необходимо изменить, чтобы изменить размер текста и отступов для выравнивания с элементом «позади», чтобы он не выступал и не выглядел уродливо. Я планирую автоматически изменять размер с помощью Javascript, но, хоть убейте, я не могу понять, как извлечь атрибут «размер текста в пикселях» со страницы, чтобы применить аргумент «if / else». Это нужно было бы сделать в браузере, и я нашел команду .getComputedStyle . Но поскольку я не могу заставить его работать, я не уверен, нужно ли мне это или нет.

 <body>

    <p id="spaz">Text to be resized.</p>

    <button type="button" onclick="txtszl()">large</button>
    <button type="button" onclick="txtszm()">medium</button>

    <script>
        function txtszl(){
            document.getElementById("spaz").style.fontSize="40px";
        }
        function txtszm(){
            document.getElementById("spaz").style.fontSize="28px";
        }
        var $txtelement = document.getElementById("spaz");
        var $txtsize = $txtelement.getComputedStyle("fontSize");

        if ($txtsize == 40px){
            alert("It's forty!");
        }else{
            alert("Nope!");
        }

    </script>

</body>

Это то, что я придумал. Любая помощь / ссылки будут с благодарностью!

Ответ №1:

getComputedStyle Функция возвращает a CSSStyleDeclaration .

 var txtElementStyles = getComputedStyle($txtelement, null),
    fontSize = txtElementStyles.getPropertyValue('font-size');

Ответ №2:

Рабочая скрипка: http://jsfiddle.net/wrathchild77/6LJaM / 

 function txtszl() {
         document.getElementById("spaz").style.fontSize = "40px";
         check();
     }

     function txtszm() {
         document.getElementById("spaz").style.fontSize = "28px";
         check();
     }

     function check() {
         var $txtsize = document.getElementById("spaz").style.fontSize;

         if ($txtsize == "40px") {
             alert("It's forty!");
         } else {
             alert("Nope!");
         }
     }

Комментарии:

1. Это не работает. style Элемент ссылается на встроенный стиль и не возвращает значение; он используется для установки стиля, а не для его извлечения. getComputedStyle() используется для извлечения значений стиля.

2. @AstroCB Ну, он вернул бы значение, если бы стиль был установлен встроенным, но он не учитывает унаследованные стили или внешние стили.

3. У меня это работает как шарм! Я бы проголосовал за вас, но на данный момент я недостаточно авторитетен. Спасибо за вашу помощь и время.

4. Нет проблем, вы должны иметь возможность пометить его как ответ, если он сработал для вас, даже если у вас еще нет репутации для голосования.

5. @swestfall Это работает, потому что вы уже используете его для установки размера. Он не учитывает унаследованные или внешние стили, поэтому он не будет работать, если OP изменит CSS для элемента в другом месте . Это безопаснее в использовании getComputedStyle() .