每天CookBook之JavaScript-018

获取DIV的高度和宽度并在DIV中画圆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>018</title><style type="text/css">#elem{width: 600px;height: 400px;border: 1px solid black;}</style><script type="text/javascript">window.onload = window.onresize = function(){var box = document.getElementById('elem');var style = window.getComputedStyle(box,null);var height = parseInt(style.getPropertyValue("height"));var width = parseInt(style.getPropertyValue("width"));var x = width/2;var y = height/2;var circleRadius = Math.min(width, height)/2;var circ = document.getElementById("circ");circ.setAttribute("r", circleRadius);circ.setAttribute("cx", x);circ.setAttribute("cy", y);}</script>
</head>
<body><div id="elem"><svg width="100%" height="100%"><circle id="circ" width="10" height="10" r="10" fill="red"></circle></svg></div>
</body>
</html>

转载于:https://www.cnblogs.com/4thing/p/5655491.html

每天CookBook之JavaScript-018相关推荐

谷歌chrome浏览器的源码分析(四)
上一次说到需要调用这个OpenURLFromTab函数,那么这个函数是做什么的呢?从名称上可能猜到它是打开网页,但是是从目前TAB页里打开呢?还是新建一个?或者使用每个TAB页一个进程呢?这些疑惑,只 ...
JavaScript基础初始时期分支（018）
Init-Time Branching初始时期分支是一种用做优化的模式.如果某些条件在程序启动后就不再改变,那么我们就只需要在初始时期检查一次就可以了,而不是在每次需要用到这些条件的时候都检查一次. ...
JavaScript中的字符串操作(转）
http://www.cnblogs.com/xuebin/articles/1296837.html 最近编一个javascript的翻译程序,发现无法正确比较两个字符串的相等,上网查了查,发现这篇 ...
检查JavaScript中变量是数字还是字符串
有谁知道如何检查JavaScript中的变量是数字还是字符串? #1楼如果要处理文字符号而不是构造函数,则可以使用typeof:. typeof "Hello World"; / ...
mega_[MEGA DEAL] 2018 Essential JavaScript编码捆绑包（96％折扣）
mega 学习世界上最重要的Web开发语言的终极指南(超过29小时,超过900页!) 嘿,怪胎, 本周,在我们的JCG Deals商店中,我们提供了另一个超值优惠. 我们将在2018 Essentia ...
30秒就能理解的JavaScript优秀代码
数组 arrayMax 返回数组中的最大值. 将Math.max()与扩展运算符 (-) 结合使用以获取数组中的最大值. const arrayMax = arr => Math.max(... ...
前端工程师的修真秘籍（css、javascript和其它）
大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definiti ...
一些javascript免费中文书籍
在这里谢谢那些无私的人~~ 这些内容来自这里: 我只把js的链接粘到这里了~ 还有其它技术文档, 实在是太多了, 多的看都看不完!!! Google JavaScript 代码风格指南 Google ...
仅用 []()+! 就足以实现几乎任意Javascript代码
G Reader里Dexter同学的分享,来自sla.ckers.org的又一神作点我测试 GReader里看不到效果的同学请自行测试下列HTML: <script language=&quo ...
收集 48 个 JavaScript 代码片段，仅需 30 秒就可理解（值得收藏）
该项目来自于 Github 用户 Chalarangelo,目前已在 Github 上获得了 5000 多Star,精心收集了多达 48 个有用的 JavaScript 代码片段,该用户的代码可以让程 ...

每天CookBook之JavaScript-018

每天CookBook之JavaScript-018相关推荐

最新文章

热门文章