javascript - 动态设置 CSS 属性

Question

所以我遇到了问题。我必须设计一个 css 按钮，用户可以通过一些自定义选项即时自定义它。他们必须能够添加文本、更改按钮颜色、更改按钮大小以及更改边框的圆度。问题是，我的 javascript 函数无法更改按钮的边框和大小。奇怪的是，它们还使其他功能无法工作。

我被告知要避免使用 jQuery。

大小改变函数的Javascript:

    function aBc()
    {
        var a = document.getElementById("buttontest");
        if(document.getElementById("smallS").checked)
        {
            a.style.width = 100px;
        }
        else if(document.getElementById("mediumS").checked)
        {
            a.style.width = 150px;
        }
        else if(document.getElementById("largeS").checked)
        {
            a.style.width = 200px;
        }
        else if(document.getElementById("hugeS").checked)
        {
            a.style.width = 300px;
        }
    }

改变边框功能的Javascript:

    function changeCorners()
    {
        var bordertest;
        bordertest = document.getElementById("buttontest");
        if (document.getElementById("none").checked)
        {
            bordertest.style.borderRadius = 0px;
        }
        else if (document.getElementById("small").checked)
        {
            bordertest.style.borderRadius = 10px;
        }
        else if (document.getElementById("medium").checked)
        {
            bordertest.style.borderRadius = 20px;
        }
        else if (document.getElementById("large").checked)
        {
            bordertest.style.borderRadius = 30px;
        }
        else if (document.getElementById("total").checked)
        {
            bordertest.style.borderRadius = 40px;
        }
    }

一切的HTML:

Button Text: <input type="text" onkeydown="changeText(event)" id="bText"><br />
Text Color: <input type="color" id="tColor" name="tColor" value="#3e3e3e" oninput="changeTextColor(tColor.value)"><br />
How Round:  <input type="radio" name="roundness" id="none" checked="checked" onchange=changeCorners()>
            <label for="none">Square</label>
            <input type="radio" name="roundness" id="small" onchange=changeCorners()>
            <label for="small">Small Roundness</label>
            <input type="radio" name="roundness" id="medium" onchange=changeCorners()>
            <label for="medium">Medium Roundness</label>
            <input type="radio" name="roundness" id="large" onchange=changeCorners()>
            <label for="large">Large Roundness</label>
            <input type="radio" name="roundness" id="total" onchange=changeCorners()>
            <label for="total">Completely Round</label><br />
Background Color: <input type="color" id="backColor" name="backColor" value="#dddddd" oninput="changeBgColor(backColor.value)"><br />
Shadow Color: <input type="color" id="shadColor" name="shadColor" value="#888888" oninput="changeShadColor(shadColor.value)"><br />
Button Size: <input type="radio" name="size" id="smallS" checked="checked" onchange=aBc()>
             <label for="smallS">Small</label>
             <input type="radio" name="size" id="mediumS" onchange=aBc()>
             <label for="mediumS">Medium</label>
             <input type="radio" name="size" id="largeS" onchange=aBc()>
             <label for="largeS">Large</label>
             <input type="radio" name="size" id="hugeS" onchange=aBc()>
             <label for="hugeS">Extra Large</label><br />

<p><input type="button" value="" class="test1" id="buttontest"></p>

Answer 1

您需要引用您的属性值。

a.style.width = 100px; 应该是 a.style.width = "100px";