小码哥的IT人生

HTML DOM background 属性

JavaScript基础 2022-06-08 14:24:03小码哥的IT人生shichen

HTML DOM background 属性

定义和用法

background 属性在一个声明中设置所有的背景属性。

语法:

Object.style.background=background-color background-image
background-repeat background-attachment background-position
参数 描述
background-color 设置元素的背景色。
  1. color-name
  2. color-rgb
  3. color-hex
  4. transparent
background-image 设置背景图像。
  1. url(URL)
  2. none
background-repeat 设置背景图像是否及如何重复。
  1. repeat
  2. repeat-x
  3. repeat-y
  4. no-repeat
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
  1. scroll
  2. fixed
background-position 设置背景图像的起始位置。
  1. top left
  2. top center
  3. top right
  4. center left
  5. center center
  6. center right
  7. bottom left
  8. bottom center
  9. bottom right
  10. x% y%
  11. xpos ypos

实例

下面的例子改变了文档背景的样式:

<html>
<head>
<script type="text/javascript">
function setStyle()
{
document.body.style.background="#FFCC80 url(bgdesert.jpg) repeat-y";
}
</script>
</head>
<body>
<input type="button" onclick="setStyle()"
value="Set background style" />
</body>
</html>

TIY

完整实例【改变文档背景的样式】:

<html>
<head>
<script type="text/javascript">
function setStyle()
{
document.body.style.background="#FFCC80 url(/i/eg_bg_desert.jpg) repeat-y";
}
</script>
</head>
<body>
<input type="button" onclick="setStyle()" value="Set background style" />
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024