6

div要素を手動で作成し、後で JavaScript を使用して CSS スタイルを追加したいと考えています。要素を作成し、そのdivスタイルを JavaScript で変更しました。問題は、一部の CSS スタイルが機能しないことです。

これはフィドルのプレビューです

( color、background、) これらのプロパティは正常に機能しましたが、 ( width、、)プロパティは機能しません。これがなぜ起こるのか、そしてそれを修正する方法を知りたいです。heightzIndextopleft

これは私のJavaScriptコードです:

function css()
{    
    var element = document.createElement('div');
    element.id = "someID";
    document.body.appendChild(element);

    element.appendChild(document.createTextNode
     ('hello this javascript works'));

    // these properties work
    document.getElementById('someID').style.zIndex='3';
    document.getElementById('someID').style.color='rgb(255,255,0)';
    document.getElementById('someID').style.background='rgb(0,102,153)';
    document.getElementById('someID').style.width='700px';
    document.getElementById('someID').style.height='200px';

    //these do not work
    document.getElementById('someID').style.left='500px';
    document.getElementById('someID').style.top='90px';
}

これは私の関連するhtmlコードです

<input type="submit" name="cssandcreate" id="cssandcreate" value="css"  onclick="css();"/>
4

3 に答える 3

7

最初にプロパティを設定する必要があるため、、leftおよびCSS スタイル設定は機能しません。プロパティが設定されていない場合、およびスタイルを設定しても影響はありません。プロパティには次の設定があります。toppositionpositionlefttopposition

  • 静的
  • 絶対の
  • 修繕
  • 相対的
  • イニシャル
  • 継承する

したがって、設定するposition前にプロパティを設定leftしてみてtopください。

object.style.position="absolute"

プロパティ間の違いは、positionその後の設定が要素を配置する方法に影響します。

于 2014-02-23T22:04:31.033 に答える
1

これがあなたが探しているものであることを願っています:

function css(){
    var element = document.createElement('div');
    element.className = "someID";
    document.body.appendChild(element);        
    element.appendChild(document.createTextNode
     ('hello this is javascript work'));

    // this properties are work
    var a = document.getElementsByClassName('someID');

    for(var i in a ){
        a[i].style.zIndex='3';
        a[i].style.color='rgb(255,255,0)';
        a[i].style.background='rgb(0,102,153)';
        a[i].style.width='700px';
        a[i].style.height='200px';
        a[i].style.left='500px';
        a[i].style.top='90px';
    }
}
于 2013-10-29T05:01:58.330 に答える