從下拉選擇中更改div的文本對齊方式？

Question

我有一些下拉列表來設置div字體的樣式。 但是我似乎無法使align正常工作。 請幫忙！！ 我一直在google上找到我的答案，而且沒有那么艱難的時間來解決問題。 該對齊確實困擾着我，我找不到解決方案。

<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

您可以使用設置其他樣式屬性的相同方法來設置align，但是該變量名為textAlign ，而不是align 。

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

從下拉選擇中更改div的文本對齊方式？

問題描述

1 個解決方案

解決方案1
3 已采納 2012-02-02 09:27:54

從下拉選擇中更改div的文本對齊方式？

問題描述

1 個解決方案

解決方案1 3 已采納 2012-02-02 09:27:54

解決方案1
3 已采納 2012-02-02 09:27:54