`

javascript 求div宽度时去掉px的超高效写法

JavaScriptCSSHTML 
阅读更多 
<html>

<head>

<style type="text/css">

div#mydiv {

   width: 100px;

   height: 100px;

   background-color: red;

}

</style>

<script language="JavaScript">

function addWidth() {

   var mydiv = document.getElementById("mydiv");

   alert(mydiv.style.width+","+parseInt(mydiv.style.width));

   var curr_width = parseInt(mydiv.style.width); // removes the "px" at the end

   mydiv.style.width = (curr_width + 10) +"px";

}

</script>

</head>

<body>

<input type="button" value="Make Bigger" onclick="addWidth()" />

<div id="mydiv" style="width:100px"></div>

</body>

</html>

主要是这句： var curr_width = parseInt(mydiv.style.width); // removes the "px" at the end

是不是很有意思？

分享到：
| 使用telnetd java类库制作守护线程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery点击div层图片爆炸碎裂效果

    3. **JavaScript/ECMAScript**：JavaScript是浏览器中的脚本语言，用于实现动态网页和交互效果。ECMAScript是其标准化规范，这里提到可能是因为JavaScript语法基于ECMAScript。 接下来，我们详细解析实现这个特效的...

    jquery插件弹出div

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。"jquery插件弹出div"是一个基于jQuery的插件，用于创建弹出式对话框或者模态框，通常用于显示警告、确认消息或者...

    css+div圆角窗口

    或者简化写法： ```css element { border-radius: 水平半径 垂直半径; } ``` 如果只设置一个值，四个角的圆角半径都相同；如果设置两个值，第一个代表上下半径，第二个代表左右半径。 2. **兼容性**： CSS3...

    JavaScript内部测试-笔试试题和答案.doc

    5. 在 CSS 中，为页面中的某个 DIV 标签设置以下样式，则该标签的实际宽度为（D．250px）。width 属性设置标签的宽度，padding 属性设置标签的内边距，border 属性设置标签的边框宽度。所以，实际宽度为 width + 2*...

    CSS tab选项卡写法

    ### CSS Tab 选项卡写法解析 #### 一、引言 在网页设计与开发过程中，选项卡（Tab）作为一种常见的交互元素，被广泛应用于各类网站及应用中。通过简单的CSS样式实现选项卡功能，不仅可以降低开发难度，还能够提高...

    Js常见面试题.pdf

    `时，其实际宽度是`200px + 20px*2 + 5px*2 = 250px`。 6. 居中对齐CSS样式： 使用`margin: 0 auto;`可以使一个`div`元素在父元素中水平居中。 7. 滚动条的添加： 要使`&lt;div&gt;`标签出现滚动条，需要设置`overflow...

    javascript针对DOM的应用分析（三）.docx

    需要注意的是，某些CSS属性如`margin-top`在JavaScript中需要使用驼峰式写法，即`marginTop`。 对于内部样式表和外部样式表，获取和修改样式较为复杂，因为涉及到CSS规则集。例如，对于内部样式表`&lt;style&gt;#dom{...}...

    javascript css float属性的特殊写法

    ### JavaScript 操作 CSS Float 属性的特殊写法 在网页开发过程中，JavaScript 与 CSS 的交互十分常见。其中，利用 JavaScript 动态控制元素样式的能力是实现页面动态效果的重要手段之一。本文主要介绍如何通过 ...

    echarts静态图表demo--2种写法

    ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，以及强大的交互性。在本示例中，"echarts静态图表demo--2种写法"将向我们展示如何在网页中...

    JAVASCRIPT IE 与 FF 中兼容写法记录

    例如，一个宽度为100px的div，边框为1px，IE的计算结果是100px，Firefox则是102px。这需要在跨浏览器设计时特别注意。 7. 判断浏览器类型 通过检测`document.all`属性的存在与否可以区分IE和Firefox： ```...

    div+CSS 兼容小摘

    - 在FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟 `px`，IE也支持此写法。例如： ```javascript Obj.Style.Height = imgObj.Style.Height + 'px'; ``` #### 六、简写属性的兼容性处理 -...

    tooltip的2种写法，一种纯css,一种 js

    在这个例子中，当鼠标悬停在元素上时，我们创建一个新的`div`作为Tooltip，并设置其内容为元素的`title`属性值。在鼠标离开时，我们逐渐透明化Tooltip并最终移除它。 **总结** 两种方法各有优缺点。纯CSS实现简单...

    JavaScript函数节流的两种写法

    最近看了函数节流的相关内容，具体什么是节流我不讨论了，网上很多，... font-size:40px; color:red; text-align: center; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;0&lt;/div&gt; [removed] var a=0; var

    JQuery应用六：窗口效果(JQuery插件的写法)

    **jQuery应用六：窗口效果（jQuery插件的写法）** 在Web开发中，jQuery库以其简洁、强大的API，使得JavaScript编程变得更加简单。本篇将深入讲解如何利用jQuery实现窗口效果，并探讨jQuery插件的编写方法。我们将...

    网页设计与制作(divcss)测试题.pdf

    题中例子描述的样式写法错误，正确的应该是`margin-left: 5px;`。 5. **IE6兼容性问题**：在IE6下，设置Div的宽高可能需要注意一些兼容性问题，如题中所示的10*10px的Div。 **选择题知识点**： 1. **静态网页**：...

    Css画三角形1

    在CSS世界中，绘制图形并非只能依赖于复杂的图像或者JavaScript，有时简单的CSS技巧就能实现一些意想不到的效果，比如利用边框(border)属性来绘制一个三角形。这个方法巧妙地利用了边框的不同宽度和颜色，以及元素的...

    圆角矩形学习参考资料

    如果只想设置所有角的相同半径，可以简化写法： ```css #round-corner-rectangle { width: 200px; /* 设置矩形宽度 */ height: 100px; /* 设置矩形高度 */ background-color: #f0f0f0; /* 设置背景颜色 */ ...

    1+X-Web前端开发职业技能等级考证中级理论模拟卷2.docx

    答案：C、320（宽度为300px，左右margin各10px，因此总宽度为320px） 4. 在CSS中，要实现距离浏览器左右窗口50像素，上下40像素，2像素红色边框的语句是什么？ 答案：A、p{padding:40px 50px; border:2px solid #...

    html 手机端自定义弹窗效果

    为了适应不同尺寸的手机屏幕，弹窗的大小和位置可能需要根据窗口宽度进行调整。使用媒体查询（`@media`）可以实现这一目标，确保弹窗在小屏幕上看起来依然合适： ```css @media (max-width: 600px) { .popup-...

Magicbox
Global site tag (gtag.js) - Google Analytics