首页 >web前端 >js教程 >javascript怎么设置div边框

javascript怎么设置div边框

青灯夜游
青灯夜游原创
2021-06-30 17:19:247431浏览

javascript设置div边框的方法:首先使用“document.getElementById("ID值")”获取指定div标签对象;然后使用“对象.style.border="边框宽度 样式 颜色"”语句设置div边框。

javascript怎么设置div边框

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

javascript设置div边框的步骤:

  • 获取div元素对象

  • 使用Style 对象的border属性来设置边框

border 属性在一个声明中设置所有边框属性。

语法:

Object.style.border=borderWidth borderStyle borderColor
描述
borderWidth 设置边框的宽度。
    描述
    borderWidth 设置边框的宽度。
    • thin
    • medium
    • thick
    • length
    borderStyle 设置边框的样式。
    • none
    • hidden
    • dotted
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
    borderColor 设置边框的颜色。
    • color-name
    • color-rgb
    • color-hex
    • transparent
    thin

    medium
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    div{ 
    padding: 10px;
    margin: 10px;
    }
    </style>
    <script type="text/javascript">
    function changeBorder()
    {
    document.getElementById("div1").style.border="thin dotted #FF0000";
    }
    </script>
    </head>
    <body>
    <div id="div1">div元素,测试文本</div><br /><br />
    <input type="button" onclick="changeBorder()" value="设置div边框" />
    </body>
    </html>

    thick

    lengthjavascript怎么设置div边框

borderStyle 设置边框的样式。

    nonehiddendotted

    dashedsoliddoublegrooveridgeinsetoutset
borderColor 设置边框的颜色。
    color-namecolor-rgbcolor-hextransparent
示例:效果图:【相关推荐:javascript学习教程】

以上是javascript怎么设置div边框的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn