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";

动态设置CSS属性

1 个答案: