Question

我正在试图弄清楚如何从CSS中提取属性以在Javascript中使用。我用Google搜索了我想要的东西很多次，而且在很多方面我的手指都会掉下来。

我希望将字体大小更改为三种不同的字体大小：15px，28px和40px。这将使用三个按钮切换。但是，当您选择字体大小时，某些其他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>

这就是我想出的。任何帮助/链接将不胜感激！

Answer 1

getComputedStyle函数返回CSSStyleDeclaration。

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

Answer 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!");
         }
     }

如何从中提取css属性

2 个答案: