个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我将 .circle 的高度和宽度都设置为 80px。然而，一些浏览器和设备将高度设置为其他值。对于这个例子，我特意将高度和宽度设置为不同的值。我想要做的是获取 clientHeight 和 clientWidth 之间的差异(在此示例中为 80 - 50 = 30)，然后从 clientHeight (80 - 30 = 50) 中减去它。为什么这行不通？
附言。此功能不适用于任何浏览器。此外，我不能只将高度设置为等于 clientWidth，因为这在某些浏览器/设备上也不起作用。
CSS
<style>
.circle {
height: 80px;
width: 50px;
border-radius: 50px;
position: relative;
}
#circle1 {
background-color: #4285F4;
}
#circle2 {
background-color: #FF8F2D;
}
#circle3 {
background-color: #34A853;
}
#circle4 {
background-color: #EB4436;
}
</style>
Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function circleHeight(){
sizeDif = document.getElementById("circle1").clientHeight - document.getElementById("circle1").clientWidth;
alert("height " + document.getElementById("circle1").clientHeight + "</br> width " + document.getElementById("circle1").clientWidth + "</br> sizeDif " + sizeDif);
if ((!(sizeDif = 0))) {
$(".circle")
.animate({
height: document.getElementById("circle1").clientHeight - sizeDif + "px"
}, 500);
sizeDif = document.getElementById("circle1").clientHeight - document.getElementById("circle1").clientWidth;
alert("height " + document.getElementById("circle1").clientHeight + "</br> width " + document.getElementById("circle1").clientWidth + "</br> sizeDif " + sizeDif);
}
}
</script>
HTML
<body onload="circleHeight()">
<p class="circle" id="circle1"></p>
<p class="circle" id="circle2"></p>
<p class="circle" id="circle3"></p>
<p class="circle" id="circle4"></p>
</body>
谢谢
最佳答案
你可以尝试改变这一行
if ((!(sizeDif = 0))) {
为此
if (sizeDif != 0) {
...
但是我觉得你的代码太“污染”了，试试这个:
function circleHeight(){
$('.circle').each(function() {
var
h = $(this)[0].clientHeight,
w = $(this)[0].clientWidth,
dif = h-w;
if ( dif != 0 ) {
$(this).height(h-dif);
}
});
}
关于javascript - 使用 clientHeight/clientWidth 的差异使高度等于宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32489084/
25
4
0
我从NVIDIA手册Eg中复制了以下代码:__threadfence()。他们为什么有 在以下代码中使用了__threadfence()。我认为使用__syncthreads()而不是__thread
我在使用 SVN 更改列表和 svn diff 时遇到了一些麻烦.特别是我想获取特定修订范围的特定文件列表的更改历史记录。 SVN 变更列表似乎是完美的解决方案，所以我的方法是: svn change
我有两个 IP 地址列表。我需要将它们合并到三个文件中，交集，仅来自 list1 的文件和仅来自 list2 的文件。 我可以用 awk/diff 或任何其他简单的 unix 命令来做到这一点吗？如何
假设自上次更新(恢复)到我的 a.b 文件以来我做了一些更改。 此 a.b 文件也在存储库中更改。 现在我想将我所做的更改与 repos 更改进行比较。 如果我 svn revert 文件，我可以看到
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 7 年前。
我使用的是 openssl 1.0.1c , linux x86_64 我正在创建包含“hello”的文件(没有换行符) openssl dgst -sha256 hello_file i get :
假设我们有几个库。 有什么区别核心和 普通 图书馆？他们应该如何被认可，我们是否组织了两者的职责？ +Common -Class1 +Core -Class2 +Lib1 has : Comm
如何在 SQLite 中计算以毫秒为单位的最小时间间隔？ 好的，提供一些背景信息， 这是我的 table 的样子: link_budget table 所以有这个时间列，我想发出一个请求，以毫秒为单位
我想知道，乐观并发控制 (OCC) 和多版本并发控制 (MVCC) 之间的区别是什么？ 到目前为止，我知道两者都是基于更新的版本检查。 在 OCC 中，我读到了没有获取读取访问锁的事务，仅适用于以后的
说到 SignalR，我有点菜鸟。刚刚开始四处探索和谷歌搜索它，我想知道是否有人可以向我解释完成的事情之间的一些差异。 在我见过的一些示例中，人们需要创建一个 Startup 类并定义 app.Map
我在 Ogre 工作，但这是一个一般的四元数问题。 我有一个对象，我最初对其应用旋转四元数 Q1。后来，我想让它看起来好像我最初通过不同的四元数 Q2 旋转了对象。 我如何计算四元数，该四元数将采用已
我了解 javascript 模块模式，但我使用两种类型的模块模式，并且想从架构 Angular 了解它们之间的区别。 // PATTERN ONE var module = (function()
我有两个具有完全相同键的 JSON。 val json1 = """{ 'name': 'Henry', 'age' : 26, 'activities' : {
我发现使用 VBA 在 Excel 中复制单个文件有两种不同的方法。一是文件复制: FileCopy (originalPath), (pathToCopyTo) 另一个是名称: Name (orig
我想知道查找两个 float 组之间差异的绝对值的最有效方法是什么？ 是否是以下内容: private float absDifference(float[] vector1, float[] vec
我有一个关于 wicket getApplication 的问题。 getApplication() 和 getSession().getApplication 有什么区别？ 部署 wicket 应用
我刚刚开始使用activemq，我有一个关于追溯消费者的问题，为了启用这个功能，你需要有一个持久的订阅。但是在主题上启用和不启用追溯的持久订阅有什么区别？ activemq 文档说。 http://a
我有两个具有完全相同键的 JSON。 val json1 = """{ 'name': 'Henry', 'age' : 26, 'activities' : {
得到另一个 Erlang 二进制表示查询('因为这就是我最近正在阅读的内容，并且需要二进制协议(protocol)实现)。 如果我正确理解了类型说明符，那么对于“浮点”类型值，8 字节表示似乎很好(这
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
我是一名优秀的程序员,十分优秀！