`

js控制li背景色[超越CSS]

CSSJavaScriptXHTMLHTML 
阅读更多

<!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>
    <title>Untitled Page</title>
</head>
<body>
<ul id="css">
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
    <li>文字</li>
</ul>
<script type="text/javascript">
    var idtest = document.getElementById("css").getElementsByTagName("li");
    //alert(idtest.length);
    for (i = 0; i < idtest.length; i++) {
        idtest.onmouseover = function() {
            this.style.background = "#cccccc";
        }
        idtest.onmouseout = function() {
            this.style.background = "#ffffff";
        }
    }
</script>
</body>
</html>

分享到：
| 判断用户分辨率调用不同的CSS样式文件
评论
发表评论

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

相关推荐

    用CSS JS控制Li背景颜色交替.rar

    这个"用CSS JS控制Li背景颜色交替"的主题就涉及到了如何使用CSS和JavaScript来实现这样的功能。首先，我们要理解CSS和JavaScript各自在网页样式和交互中的角色。 **CSS（层叠样式表）**是用于描述HTML或XML（包括如...

    用CSS+JS控制Li背景颜色交替特效代码

    在网页设计中，CSS（层叠样式表）和JavaScript经常被用来实现各种视觉效果，其中就包括了控制列表项（Li）的背景颜色交替。这种特效可以为网站增添层次感和可读性，使得列表数据更加突出。接下来，我们将详细讨论...

    CSS定义Div区域的LI列表响应鼠标变色.rar

    4. 当鼠标悬停在`li`上时，背景色变为淡灰色，并且添加了过渡效果，使得颜色变化更为平滑。 5. 更改鼠标形状，显示可交互性。 通过这种方式，用户在浏览网页时，可以直观地识别出鼠标悬停的列表项，提高了交互体验...

    ul li 换色 li 列表布局隔行背景颜色

    ul li 换色 li 列表布局隔行，color from red tabs 背景颜色

    CSS结合JavaScript 实现Li隔行换色 代码

    ### CSS结合JavaScript 实现Li隔行换色代码详解 #### 一、背景介绍 在网页设计与开发过程中，为了提高用户体验以及美观性，开发者经常需要对列表项进行样式处理，如实现列表项的隔行变色功能。这种功能不仅能够使...

    DIV+CSS+JS二级树型菜单，ul li展开后刷新无影响

    作者已经修正了原作中的错误，即#nav li的背景色和背景图片分开写了，造成背景色不生效。现在，菜单的背景色和图片都可以正确地显示。 知识点： 1. 使用 DIV、CSS 和 JS 实现二级树型菜单 在本资源中，作者使用 ...

    li列表隔行不同色CSS设计

    "li列表隔行不同色CSS设计"是一个常见的需求，目的是使列表的每一行在颜色上有所区分，特别是鼠标悬停时，用户可以更清晰地感知到当前所选的行。这通常通过CSS实现，无需依赖JavaScript或其他编程语言。 首先，我们...

    css中ul li的背景小图标属性设置的两种情况

    在CSS中对列表元素`ul`和其子元素`li`进行样式设置时，常常需要使用背景图像来作为列表项前的图标。通常，这样的图标可以作为列表项的装饰，用来区分不同的列表项或者增加视觉效果。在具体实现中，我们有两种常见的...

    图片自动轮播用li做上下控制柄div+css+jquery

    标题中的“图片自动轮播用li做上下控制柄div+css+jquery”指的是一个使用HTML、CSS和jQuery实现的图片轮播效果，其中利用`&lt;li&gt;`元素作为控制按钮，`&lt;div&gt;`作为轮播容器，并通过CSS进行样式设计，jQuery进行动态交互...

    CSS控制背景变换下拉菜单

    总结一下，创建一个CSS控制的背景变换下拉菜单主要涉及以下几个步骤： 1. 构建HTML结构，通常是基于`&lt;ul&gt;`和`&lt;li&gt;`的嵌套结构。 2. 使用CSS选择器来定位和隐藏/显示下拉菜单。 3. 通过`background-image`属性更换...

    Css测试，li超出部分的汉字隐藏

    标题"Css测试，li超出部分的汉字隐藏"提示我们，这个话题主要关注如何在CSS中控制`&lt;li&gt;`元素内的汉字当其内容超过指定宽度时进行隐藏。 在CSS中，我们可以使用多种方法来实现这种效果，例如： 1. **overflow** ...

    纯css鼠标经过列表高亮显示

    通过这种方式，我们就能实现“纯CSS鼠标经过列表高亮显示”的功能，无需依赖JavaScript或者其他编程语言，使得页面加载更快，同时也能提升网站的可访问性和可维护性。在网页设计中，理解并熟练运用CSS选择器和伪类...

    ul的li样式

    /* 激活状态的背景色 */ border-bottom: none; /* 去除底部边框 */ } .tabs li:not(.active) { visibility: hidden; /* 非激活状态隐藏内容 */ } ``` 7. **响应式设计**：利用媒体查询（`@media`），可以为...

    个人博客html+css+JavaScript完整代码

    在个人博客中，CSS可以用来设定背景颜色、字体样式、边距和填充、布局模式（如网格或流式布局），以及响应式设计，确保博客在不同设备上都能良好显示。CSS3还提供了更多的特效，如阴影、渐变、过渡和动画，以增加...

    LI更换背景更换显示区域内容JS效果

    总的来说，实现"LI更换背景更换显示区域内容JS效果"需要熟练掌握JavaScript的DOM操作、事件处理以及CSS样式控制。通过监听用户交互，动态更新元素的样式和内容，可以为网页带来丰富的视觉反馈和用户体验。同时，了解...

    JS+CSS实现Li列表隔行换色效果的方法

    本篇将介绍如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 实现 `li` 列表元素的隔行换色效果。首先，我们需要理解 CSS 的基本样式设置以及 JavaScript 如何操作 DOM（文档对象模型）中的元素。 1. **...

    css控制UL LI 的样式详解(推荐)

    此外，还可以通过其他CSS属性来进一步定制`&lt;ul&gt;`和`&lt;li&gt;`的样式，如设置颜色、字体、背景色、边框、内边距、外边距等。例如： ```css #menu ul li a { display: block; /* 使链接占据整个`li`宽度 */ color: #333;...

    js css 模拟html下拉框

    我们可以通过CSS定义下拉按钮的样式，包括背景色、边框、字体等，同时也可以为显示的选项列表设置样式，如宽度、高度、过渡效果等。例如： ```css .custom-select { position: relative; width: 200px; } ....

    Jquery的hover方法让鼠标经过li时背景变色

    这个颜色值`#bcd4ec`是淡蓝色，当`&lt;tr&gt;`（或原本应为`&lt;li&gt;`）拥有`blue`类时，它的背景就会变成这种颜色。 5. `&lt;style&gt;`部分定义了`.blue`类的样式，背景颜色是`#bcd4ec`，这是一种浅蓝色。 总结来说，这个示例...

    JS+CSS美化经典Select选项框插件

    2. **CSS美化**：通过CSS，我们可以自定义Select的背景色、边框、字体、颜色、阴影等。还可以添加过渡效果、圆角、自定义箭头图标等，使选择框看起来更现代化。例如，使用伪类`:hover`和`:active`可以实现鼠标悬停和...

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