Javascript toggle list-style

Question

私はクリック時に行番号を削除する小さなトグルスイッチを構築しようとしています。私はここで働いて、それを持っている

：http://www.webdevout.net/test?09&raw

それはGeshiによって強調されたコードである、と私は行番号を切り替えるには、上部にはJavaScriptを構築します。

これはうまくいきますが、私が本当に望むのは、行番号が「非表示」のときに、左の空白も削除されるということです。実際のコードが画面に表示されるようにします。

再度クリックすると、行番号が再び表示されます。あなたが0にol要素のパディングを変更する必要が

Answer 1

：

document.getElementsByTagName("ol")[0].style.padding = '0'; 

スクリプトの上には、あなただけのドキュメント内の1つの<ol>を持っていると仮定している、または少なくとも第1は、編集したいものです。あなたがあなたのアプローチは、しかし少しビット間違っている、あなたは<ol>のlistStyleを変更する必要があります

と

document.getElementsByTagName("ol")[0].style.paddingLeft = '0px'; 

document.getElementsByTagName("ol")[0].style.paddingLeft = '20px'; 

切り替えるなければならないでしょう

EDIT

個々のタグではなく、<li>タグです。

document.getElementsByTagName("ol")[0].style.listStyle = 'none'; 

と

document.getElementsByTagName("ol")[0].style.listStyle = 'decimal'; 

EDIT2おそらく、これを試してみます。あなたも私にそれをリンクすることができれば、私はクロームとファイアフォックスでそれをテストすることができます。たぶん私はあなたの問題..

function toggle_visibility() { 
    var e = document.getElementsByTagName("ol")[0]; 
    if(e.style.listStyle == 'none') { 
     e.style.listStyle = 'decimal'; 
     e.style.paddingLeft = '20px'; 
    } else { 
     e.style.listStyle = 'none'; 
     e.style.paddingLeft = '0px'; 
    } 
    } 
} 

リンク

<a onclick="toggle_visibility();">toggle</a> 

EDIT3

ああが届かない、私は問題を発見:)

if(document.getElementsByTagName("ol")[0].style.listStyle.substr(0,4) == 'none') 

ときのでlistStyleを 'none'に設定します。実際には 'none none'に設定されます。 IE。したがって、.substr（0,4）を使用して最初の4文字をどれとも比較しない場合は、うまくいくはずです。