js修改html不成功,为什么这段代码中用js修改css样式中的display属性却不成功？

getByClass() 这个方法写的有问题，你这个方法目的是获取className的元素数组。

var s = getByClass('li'); 但是你用的是 li，是tagName

function changeshow(){

var p = getByClass('showmenu'); 这里用的是className

p.style.display = ""; p是数组 jquery对象可以用数组.css();这样写，你这样写是错的

写一个循环，然后赋值，并且最好不要用“”，用block就行了。

}

noneshow 这个一样的错误

这是改好的

无标题文档

marign: 0;

padding: 0;

}

.box{

width: 500px;

height: 100px;

margin: 0 auto;

}

li{

width: 50px;

height: 30px;

border: solid #000 1px;

float: left;

list-style: none;

margin-right: 15px;

}

.showmenu{

border: #000 solid 1px;

width: 200px;

display: none;

}

function getByClass(cls){

var eles = [];

var elements = document.getElementsByTagName('*');

for(var i = 0; i < elements.length; i++){

if(elements[i].tagName.toLowerCase() == cls){

eles.push(elements[i]);

}

return eles;

}

window.onload = function(){

var s = getByClass('li');

var length = s.length;

for(var i=0; i

s[i].onmouseover = changeshow;

s[i].onmouseout = noneshow;

}

function changeshow(){

var p = document.getElementsByClassName('showmenu');

var length = p.length;

for(var i=0;i

p[i].style.display = "block";

}

function noneshow(){

var p = document.getElementsByClassName('showmenu');

var length = p.length;

for(var i=0;i

p[i].style.display = "none";

}

菜单1
菜单2
菜单3
菜单4
菜单5

鼠标经过li标签后应该显示的

js修改html不成功,为什么这段代码中用js修改css样式中的display属性却不成功？相关推荐

一段代码看出JS的的解析到执行的顺序规则
一段代码看出JS的的解析到执行的顺序规则代码 function bar(a, b) {b = 3;var b;function b(){}console.log(a); // 打印出:10conso ...
在css样式中隐藏元素,用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...
js页面加水印防复制防另存为代码(纯js)
这段代码是给前端页面添加水印的代码..何为水印?是可以显示登录人的姓名也可以定制一些内容等...代码如下: 前提是得引用下面两个js 可以去下载引入 <html> <head> ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~ HTML中样式的写法不外乎以下四种方式行内样式假装有内容 head内部样式 div { widt ...
电脑桌面图标右上角出现计算机名称如何取消,电脑桌面图标上的箭头看着太闹心？一段代码轻松去除！-电脑桌面图标有蓝色阴影怎么去掉...
我们的电脑安装软件后,如果创建桌面快捷方式,总会带有一个小箭头,有些朋友很不喜欢,觉得影响了电脑桌面的美观.这两天正好有粉丝朋友咨询了如何去除箭头的问题,"电脑那些事儿"今天就教大 ...
查看计算机的桌面代码,电脑桌面图标的箭头看着太闹心？一段代码轻松去除
原标题:电脑桌面图标的箭头看着太闹心?一段代码轻松去除我们的电脑安装软件后,如果创建桌面快捷方式,总会带有一个小箭头,有些朋友很不喜欢,觉得影响了电脑桌面的美观.这两天正好有粉丝朋友咨询了如何去除箭 ...
easyui修改css样式,修改easyui的easyloader的默认css目录路径
easyloader默认情况下会使用js文件所在目录下的themes文件夹中的css,这里改成项目自定义的css文件夹. 首先找到: var m=src.match(/easyloader\.js(\ ...
js获取传统节假日_js判断节假日的代码分享
js判断节假日实例代码效果展示: /************************************************************* * 判断某天是不是工作日 * * @ ...

js修改html不成功,为什么这段代码中用js修改css样式中的display属性却不成功？

js修改html不成功,为什么这段代码中用js修改css样式中的display属性却不成功？相关推荐

最新文章

热门文章