function scrollfun()
{
var ob = document.getElementById('rowScroll');
ob.style.height ="300px";
ob.style.width = "200px";
}
这rowScroll是<div>身份证。上面的代码工作正常。但以下代码不起作用：
function scrollfun()
{
var ob = document.getElementById('rowScroll');
ob.style.height ="30%";
ob.style.width = "20%";
}
我怎样才能得到这个与百分比一起工作？
您将需要使用 div 标签来实现这一点。请参阅下面的工作代码：
<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
document.getElementById("b1").style.height="200%";
}
</script>
</head>
<body>
<div style="height:25px;">
<input type="button" id="b1" onclick="displayResult()" value="Change height of button" >
</body>
</html>
如果你“告诉”它这些百分比是什么？喜欢
function scrollfun()
{
var ob = document.getElementById('rowScroll');
ob.style.height = (container-width * 30)/100 + "px"
ob.style.width = (container-width * 20)/100 + "px"
}
仅供参考，基于百分比的宽度高度取决于元素“rowScroll”的父容器。尝试将高度、宽度信息提供给父级本身...
更新：
为了使高度宽度为屏幕的 50%，如下所示：
function windowHW() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myHeight,myWidth];
}
function scrollfun()
{
var ob = document.getElementById('rowScroll');
document_dimension = windowHW();
ob.style.height =document_dimension[0]/2;
ob.style.width =document_dimension[1]/2;
}
请注意，函数 windowHW 是对以下解决方案的轻微修改：
stackoverflow 问题：JavaScript -由meder回答的获取浏览器高度
只需使用className来自 javascript的属性
function scrollfun()
{
document.getElementById("rowScroll").className = "MyClass";
}
在你的 CSS 中
.MyClass{height:30%;width:20%;}