HTML+JS将div的高和宽按比例复制给另一个DIV

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
#dom2{
    width:450px;
    height: 450px;
    background-color: black;
}
#as{
    background-color: red;
}
    </style>
</head>
<body>
    <div id="dom2"></div>
    <div id="as"></div>

    <script>
    var width=document.getElementById(‘dom2‘).offsetWidth;
    var height=document.getElementById(‘dom2‘).offsetHeight;
    var nh=height*16/9;
    document.getElementById(‘as‘).style.width=width+"px";
    document.getElementById(‘as‘).style.height=nh+"px";
    </script>
</body>
</html>

时间： 2024-11-07 01:01:23

HTML+JS将div的高和宽按比例复制给另一个DIV的相关文章

js获取网页屏高屏宽

<SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document.body.scrollLeft 滚动条的左端距离 window.onload = function() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:&qu

JavaScript基础将一个div中的所有内容赋值给另一个div innerHTML

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

如何动态改变报表的行高列宽

报表应用中有时需要动态控制行高或列宽以满足特定需要.如分组报表中要求每个分组的总高度 / 宽度固定不变,这样一来就能实现每页纸打印相同数量的分组. 润乾报表可以在行高列宽属性中编写表达式,从而实现动态行高列宽,下面通过一个例子说明使用过程. 1.连接数据源使用润乾报表设计器,连接自带数据源 DEMO 2.设置数据集新建报表并设置数据集,使用 SQL 取数数据集 ds1 如下: SELECT STATE,EID,NAME,SURNAME,GENDER,DEPT,SALARY FROM EMP

如何动态添加和删除一个div

代码实例如下: <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">#father{ wi

jQuery实现动态添加和删除一个div

本文主要给大家简单介绍一下如何动态的在一个元素添加和删除div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div {

div+css实现未知宽高元素垂直水平居中

div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div+css实现未

Echarts高和宽自适应问题

写在前面:echarts如果不给高度是无法显示的,这在很多场景中是非常不方便的.以下通过父div的高来计算echarts的高,以达到高度自适应的需求. 以下代码是在vue中引用echarts. 页面代码: <div class="chartDiv" id="chartDiv_h"> <div id="myChart_h"></div> </div> 父div的css样式: .chartDiv{ wi

如何让li中的a与li同高同宽

<div class="nav1"> <ul> <li><a href="#">首页</a></li> <li><a href="#">直播间</a></li> <li><a href="#">高清回放</a></l

js实现动态给一个div添加文本内容与简单的日历

js实现动态给一个div添加文本内容(即在文本框中输入一段文字,点击设置文字按钮实现将文本框中的文字添加到div中) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <style