如何让JS代码效果居中

JavaScript06

如何让JS代码效果居中,第1张

普通居中方法:margin:0 auto;就可以实现。应该是样页面的一个DOM居中吧!就用相对定位就可以了。

下面是个小例子:

<body>

<div id="div" style="width:100px height:100px background:#ccc display:none"></div>

    <input type="button" value="click me" id="btn" />

</body>

<script>

var oBtn = document.getElementById('btn')

var oDiv = document.getElementById('div')

oBtn.onclick = function(){

oDiv.style.cssText = 'width:100px height:100px background:#ccc top:50% left:50% position:absolute margin-left:-50px margin-top:-50px display:block'

}

</script>

cssText 需要将原样式清空后再补填样式。

主要是用样式的定位来做。你可以通过页面的宽度和高度去计算。

JS代码让文字垂直居中的方法

水平居中方法: 将浏览器可视区的宽度(clientWidth) -减去 要居中元素本身的宽度(offsetWidth) /除以 2 +'px'

垂直居中方法: 将浏览器可视区的高度(clientHeight) -减去 要居中元素本身的高度(offsetHeight) /除以 2 +'px'

window.onload = function() {

var oMain = document.querySelector('#pop-main')

oMain.style.left = (document.documentElement.clientWidth - oMain.offsetWidth) / 2 +'px'

oMain.style.top = (document.documentElement.clientHeight - oMain.offsetHeight) / 2 +'px'

}

js代码

JS即Javascript,Javascript是一种由Netscape的LiveScript发展而来的脚本语言,主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。

当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。