javascript鼠标点击实现改变CSS样式

最新推荐文章于 2024-07-09 12:30:00 发布

great-sage

最新推荐文章于 2024-07-09 12:30:00 发布

阅读量2.8w

点赞数 2

分类专栏： js/jQuery/html/css 文章标签： javascript css class html 测试 url

本文链接：https://blog.csdn.net/thinkscape/article/details/7233281

版权

js/jQuery/html/css 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

javascript通过改变元素class名达到间接改变CSS样式

CSS:

/* 字体链接样式 */
td.firstLevelMenuClass a:link {color: #3E8BAC; text-decoration: none;}		/* 未访问的链接 */
td.firstLevelMenuClass a:visited {color: #FFFFFF; text-decoration: none;}	 /* 已访问的链接 */
td.firstLevelMenuClass a:hover {color: #FFFFFF;}    /* 鼠标移动到链接上 */
td.firstLevelMenuClass a:active {color: #FFFFFF;}	/* 选定的链接 */

/* 鼠标事件背景样式 */
td.firstLevelMenuClass:hover {background-image: url(../../Public/img/menu_first_down_bg.gif); }	 /* 鼠标移动到链接上 */
td.firstLevelMenuClassHover{background-image: url(../../Public/img/menu_first_down_bg.gif); }
td.firstLevelMenuClass{background-image: url(../../Public/img/head_menu_center.gif); }

JS:

/*
* 取得对应类和标签的HTML元素
* clsName:给定类名
* tagName：给定的HTML元素，如果为任意 tagName='*'
* 
*/
function getElementsByClassName(clsName, tagName) {
    var ClassElements = [];
    selElements = document.getElementsByTagName(tagName);

    for (var i = 0; i < selElements.length; i++) {
        if (selElements[i].className == clsName) {
            ClassElements[ClassElements.length] = selElements[i];
        }
    }
    return ClassElements;
}

//通过改变元素class名达到间接改变背景样式
function onFirstMenuChangeBg(e) {
    //先清除已经改变的元素背景样式
    var getElements = getElementsByClassName('firstLevelMenuClassHover', 'td');
    for (var i = 0; i < getElements.length; i++) {
        getElements[i].className = "firstLevelMenuClass";
    }
    //设置鼠标点击元素背景样式
    e.className = "firstLevelMenuClassHover";
}

HTML:

<td class="firstLevelMenuClass" id="firstLevelMenu0"  οnclick="onFirstMenuChangeBg(this);" >
	<a href='#'>测试0</a>
</td>
<td class="firstLevelMenuClass" id="firstLevelMenu1"  οnclick="onFirstMenuChangeBg(this);" >
	<a href='#'>测试1</a>
</td>

<td class="firstLevelMenuClass" id="firstLevelMenu2"  οnclick="onFirstMenuChangeBg(this);" >
	<a href='#'>测试2</a>
</td>