风格.高度不工作javascript

style.height doesnt work javascript

本文关键字：javascript 工作 高度 风格      更新时间：2023-09-26

我想让地图的高度是自动与设备的屏幕…但是当我改变风格时。高度为自动，100%，屏幕。高度，地图消失了……如何使高度是自动的?这是我的代码…

script.js 

$('#home').live('pagecreate',function(){
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
});
index。html中的

我刚刚调用了

<div id="home" data-role="page">
    <div data-role="header">
    *my header*
    </div>
    <div data-role="content">
        <div id="map_canvas"></div>
    </div>
</div>

如果你使用jquery，你可以这样做:而不是:

document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";

可以使用:

$("#map_canvas").css({
    'width':screen.width,
    'height':"20em"
});

请检查以下示例:我认为你的问题是有关css而不是javascript。你想要设置的%高度将基于父高度，所以如果父高度为空，0的100%将为0:检查这个

代码示例:

<!DOCTYPE html>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<style>
#map_canvas{
    background-color:#00F;
    }
#cont{
    background:#F00;
    height:200px;
    }
</style>
<button onClick="doit1()">Click me to put something in map_canvas</button>
<button onClick="doit()">Click me to make the height 100%</button>
<div id="home" data-role="page">
    <div data-role="header">
    *my header*
    </div>
    <div id="cont" data-role="content">
        <div id="map_canvas"></div>
    </div>
</div>
</body>
<script>
$('#home').live('pagecreate',function(){
$('#map_canvas').css('height','auto');
});
function doit(){
    $('#map_canvas').css('height','100%');
    }
function doit1(){
    $('#map_canvas').html('a')
    }
</script>
</html>

相关文章：