jQuery控制页面背景色

最新推荐文章于 2025-08-09 20:51:19 发布

原创最新推荐文章于 2025-08-09 20:51:19 发布 · 6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #c

Script的折腾专栏收录该内容

3 篇文章

订阅专栏

该博客演示了如何使用jQuery根据下拉选择器的选项来改变网页背景颜色。通过监听下拉框的变更事件，获取选中项的值，并设置为页面背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery控制页面背景色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鏃犳爣棰樻枃妗?/title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
function XX()
 {
    alert($("select[@name='a'] option[@selected]").text());
    $("#a").val('1');
    var X = $("select[@name='a'] option[@selected]").attr("value");
    $(document.body).css("background", X ); 
 }
</script>
<select id="a" onchange="XX()" name="a">
  <option value="#d0cfb2" selected="selected">闃呰搴曡壊</option>
  <option style="BACKGROUND-COLOR: #d0cfb2" value="d0cfb2">榛樿璁剧疆</option>
  <option style="BACKGROUND-COLOR: #e9faff" value="e9faff">缁忓吀娣¤摑</option>
  <option style="BACKGROUND-COLOR: #f1f1f1" value="f1f1f1">缁忓吀娣＄伆</option>
  <option style="BACKGROUND-COLOR: #eefaee" value="eefaee">缁忓吀缁挎剰</option>
  <option style="BACKGROUND-COLOR: #ffffed" value="ffffed">缁忓吀鏄庨粍</option>
  <option style="BACKGROUND-COLOR: #4394d6" value="4394d6">娣辫摑娴锋磱</option>
  <option style="BACKGROUND-COLOR: #d0cfb2" value="d0cfb2">绉嬫剰鐩庣劧</option>
  <option style="BACKGROUND-COLOR: #9fc383" value="9fc383">缁挎剰娣￠泤</option>
  <option style="BACKGROUND-COLOR: #fcefff" value="fcefff">绾㈢矇涓栧</option>
  <option style="BACKGROUND-COLOR: #fbe5d9" value="fbe5d9">绾㈣皥鎰忔祿</option>
  <option style="BACKGROUND-COLOR: #c2ceda" value="c2ceda">娴烽様澶╃┖</option>
  <option style="BACKGROUND-COLOR: #616378" value="616378">蹇冪杩囧幓</option>
  <option style="BACKGROUND-COLOR: #ffffff" value="ffffff">闆櫧澶╁湴</option>
  <option style="BACKGROUND-COLOR: #cccccc" value="cccccc">鐏拌壊涓栫晫</option>
</select>
</body>
</html>