Question

我有一些下拉列表来设置div的字体样式。但是，我似乎无法使对齐工作。请帮忙！！我总是在谷歌上找到我的答案，并没有这么艰难的时间来解决问题。对齐真的让我烦恼，我无法找到解决方案。

<SCRIPT LANGUAGE="JavaScript">

function fontSize(size){   
document.getElementById("lineOne").style.fontSize = size   
}  

function fontFamily(family) {
document.getElementById("lineOne").style.fontFamily = family
}

function fontStyle(style)   {
document.getElementById("lineOne").style.fontStyle = style
}

function fontWeight(weight) {
document.getElementById("lineOne").style.fontWeight = weight
}

function addContent(divName, content) {
 document.getElementById(divName).innerHTML = content;
} 

function setColor()   {     
var color = document.getElementById("color").value;     
document.getElementById("myDiv").style.color = color;   
} 

function alignl(ele){     
document.getElementById("lineOne").style.align = ele
}

</SCRIPT>

身体是这样的：

<body>

Size:
    <select name=fontSizeChanger onchange="fontSize(this.value)">   
        <option value="6">6</option>
         <option value="8">8</option>   
         <option value="10">10</option>   
         <option value="12" selected="selected">12</option>   
         <option value="14">14</option>   
         <option value="16">16</option>   
         <option value="18">18</option>   
         <option value="20">20</option>   
    </select>  

    Colour:
    <select id="color" onclick="setColor();">
        <option value="white">white</option>           
        <optionvalue="black"selected="selected">black</option>           
        <option value="red">red</option>           
        <option value="lightblue">light blue</option>           
        <option value="darkblue">dark blue</option>           
        <option value="lightgreen">light green</option>           
        <option value="darkgreen">dark green</option>           
        <option value="yellow">yellow</option>           
        <option value="orange">orange</option>           
        <option value="pink">pink</option>           
        <option value="purple">purple</option>           
        <option value="gray">gray</option>         
    </select> 

    Family:
    <select id="fontFamilyChanger" onchange="fontFamily(this.value)">  
<option value="sans-serif" selected="selected">Sans Serif</option>           
        <option value="Impact">Impact</option>           
    <option value="times new roman">Times New Roman</option>               
    </select>      

    Style:
    <select id="fontStyleChanger" onchange="fontStyle(this.value)">  
    <option value="normal" selected="selected">Normal</option>           
        <option value="italic">Italic</option>           
        <option value="oblique">Oblique</option>              
    </select> 

    Weight:
    <select id="fontWeightChanger" onchange="fontWeight(this.value)">  
    <option value="normal" selected="selected">Normal</option>           
    <option value="bold">Bold</option>                       
    </select>

    Align:
    <select id='s' name='s'  onchange="alignl(this.value);">
        <option value="left">left</option>
        <option value="right">right</option>
        <option value="center">center</option>
        <option value="top">top</option>
    </select>

    <form name="myForm">
        <input name="myContent"></input>
        <input type="button" value="Add content" onClick="addContent('lineOne', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
    </form>

    <div id="myDiv">
        <div id="lineOne"></div>
    </div>

</body>

Answer 1

您可以像设置其他样式属性一样设置对齐，但变量名为textAlign，而不是align。

function alignl(style)   {
  document.getElementById("lineOne").style.textAlign = style; 
}

从下拉选择中更改div的文本对齐方式？

1 个答案: