Question

创建一个包含三段文字的网页。在页面上提供了一种方法用户增加和减少三个段落的字体大小。文本的字体大小不应该允许大于40px且不小于6px。

这是我的HTML代码：

<head>
    <title>Demo</title>
    <link tpye="text/javascript" href="Javascript.js" />
    <link rel="stylesheet" type="text/css" href="Css.css" />      
</head>

<body>
    <select>
        <option value="document.getElementById('f6').style.font-size='6px'">6px</option>
        <option value="document.getElementById('f12').style.font-size='12px'">12px</option>
        <option value="document.getElementById('f18').style.font-size='18px'">18px</option>
        <option value="document.getElementById('f24').style.font-size='24px'">24px</option>
        <option value="document.getElementById('f30').style.font-size='30px'">30px</option>
        <option value="document.getElementById('f36').style.font-size='36px'">36px</option>
        <option value="document.getElementById('f40').style.font-size='40px'">40px</option>
    </select>
    <p>Hello World</p>
    <p>How are you?</p>
    <p>What's you name?</p>
</body>

Answer 1

<强> HTML：

<select onChange="selectsize()" id="selector">
        <option value="6">6px</option>
        <option value="12">12px</option>
        <option value="18">18px</option>
        <option value="24">24px</option>
        <option value="30">30px</option>
        <option value="36">36px</option>
        <option value="40">40px</option>
    </select>

<div id="number">
    <p>Hello World</p>
    <p>How are you?</p>
    <p>What's you name?</p>
</div>

<强> JavaScript的：

<script language="javascript">
    function selectsize()
            {
                var e = document.getElementById("selector");
                var applyfontsize = e.options[e.selectedIndex].value;

                document.getElementById("number").style.fontSize = applyfontsize + 'px';
            }
</script>

javascript更改元素样式 - fontsize

1 个答案: