Javascript切换列表样式

Question

我正在尝试构建一个小的切换开关，可以在点击时删除行号。

我在这里工作：http://www.webdevout.net/test?09&raw

这是Geshi突出显示的代码，我在顶部构建了javascript来切换行号。

这样可以正常工作，但我真正想要的是，当行号被“隐藏”时，它也会消除左边的间隙。这样实际的代码填满了屏幕。

如果再次点击，行号将再次返回。

Answer 1

您必须将ol元素的填充更改为0：

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

以上脚本假设您的文档中只有一个<ol>，或者至少第一个是您要编辑的文件。

修改

你必须在

之间切换

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

和

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

您的方法有点不对，您应该更改<ol>标记的listStyle而不是单个<li>标记。

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

和

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

EDIT2 也许试一试。如果您也可以将我链接到它，我也可以在chrome和firefox中测试它。也许我没有得到你的问题..

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设置为＆＃39; none＆＃39;它实际上被设置为“没有”之外的“无”＃39;通过Firefox和IE浏览器。因此，如果你使用.substr（0,4）来获得前4个字符来比较没有，你应该没问题：）