html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...

要隐藏一个div，可以使用以下JavaScript代码： ``` document.getElementById("yourDivId").style.display = "none"; ``` 要获取一个div元素的宽度和高度，可以使用以下JavaScript代码： ``` var divWidth = document.getElementById("yourDivId").offsetWidth; var divHeight = document.getElementById("yourDivId").offsetHeight; ``` 这将返回元素的实际宽度和高度，包括padding、border和CSS的宽度和高度。如果您只需要获取CSS的宽度和高度，可以使用以下代码： ``` var divWidth = document.getElementById("yourDivId").clientWidth; var divHeight = document.getElementById("yourDivId").clientHeight; ``` 这将返回元素的CSS宽度和高度，不包括padding和border。

<nav> <div class="rightnav"> <ul> <li> <ul> <li></li> </ul> </li> <li> <ul> <li></li> </ul> </li> <li> <ul> <li></li> </ul> </li> <li style="cursor:pointer"> <span style="cursor:pointer"></span> </li> </ul> </div> </nav> .rightnav>ul>li:nth-child(4) { content: '\ea45'; font-family: 'icomoon'; } .rightnav ul li ul { position: relative; } .rightnav ul li ul li { position: absolute; left: -160px; background-color: purple; width: 150px; height: 150px; margin-bottom: 10px; display: none; } .rightnav ul>li:nth-child(2) ul li { top: 75px; } .rightnav ul>li:nth-child(3) ul li { top: 150px; } .rightnav>ul>li:hover ul li { display: block; }为什么cursor没起效果

根据您提供的代码，可以看出您想要为 .rightnav>ul>li:nth-child(4) 元素设置鼠标指针样式为指针形状。不起作用的原因可能有以下几种可能性： 1. 样式被其他CSS规则覆盖：请确保该选择器的样式没有被其他选择器的样式覆盖掉。您可以通过在该样式中添加 !important 来提高其优先级，例如：cursor: pointer !important。 2. 元素不是允许更改鼠标指针样式的元素：请确保该元素是可以更改鼠标指针样式的元素，例如链接（a）或具有交互性质的元素。如果不是这些元素，更改鼠标指针样式可能不会生效。 3. 字体图标未正确加载：如果您使用的字体图标库未正确加载，可能会导致字体图标无法显示。请确保已正确引入所需的字体图标库，并检查浏览器的开发者工具中是否存在任何加载错误。如果以上解决方案都无效，请提供更多相关代码以便我更好地帮助您解决问题。

<!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>纯CSS菜单</title> <style> *{ margin:0; padding:0; } li{ list-style:none; text-align:center; line-height:24px; } a{ text-decoration:none; color:#333333; font-size:12px; line-height:24px; display:block; } .nav ul li{ width:120px; float:left; border:1px #333 dashed; background:#FFD2D2; } .nav ul li ul{ display:none; } .nav ul li a:hover{ color:#fff; background-color:#BB0916; } .nav ul li:hover ul,.nav ul li a:hover ul { display:block; width:120px; height:24px; } .nav ul li ul li { background-color:#FEE; width:120px; } .nav ul ul li a:hover{ background:#F7F7B9; color:#666666; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">最新更新</a></li> <li><a href="#">下载排行</a></li> </ul> </li> <li><a href="#">企业新闻</a> <ul> <li><a href="#">企业介绍</a></li> <li><a href="#">最新动态</a></li> </ul> </li> <li><a href="#">产品信息</a> <ul> <li><a href="#">最新产品</a></li> <li><a href="#">产品列表</a></li> </ul> </li> <li><a href="#">特价促销</a> <ul> <li><a href="#">促销</a></li> <li><a href="#">最新推荐</a></li> <li><a href="#">产品列表</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">公司信息</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">公司地图</a></li> </ul> </li> <li><a href="#">新手论坛</a> <ul> <li><a href="#">你问我答</a></li> <li><a href="#">网站大学堂</a></li> <li><a href="#">论坛</a></li> </ul> </li> </ul> </div> </body> </html>

这段代码实现了一个纯CSS的下拉菜单，包含多级子菜单。主菜单和子菜单使用不同的样式，使用:hover伪类来控制菜单的显示和隐藏。具体实现方式如下： 1. HTML结构：使用ul和li标签来表示菜单和子菜单，其中li标签包含一个链接或文本作为菜单项内容： ``` <div class="nav"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">最新更新</a></li> <li><a href="#">下载排行</a></li> </ul> </li> <li><a href="#">企业新闻</a> <ul> <li><a href="#">企业介绍</a></li> <li><a href="#">最新动态</a></li> </ul> </li> ... </ul> </div> ``` 2. CSS样式：使用float属性让菜单项在同一行显示，使用border和background属性设置菜单项的样式，使用display属性控制子菜单的显示和隐藏。使用:hover伪类来控制菜单项和子菜单的样式： ``` .nav ul li{ width:120px; float:left; border:1px #333 dashed; background:#FFD2D2; } .nav ul li ul{ display:none; } .nav ul li a:hover{ color:#fff; background-color:#BB0916; } .nav ul li:hover ul,.nav ul li a:hover ul{ display:block; width:120px; height:24px; } .nav ul li ul li { background-color:#FEE; width:120px; } .nav ul ul li a:hover{ background:#F7F7B9; color:#666666; } ``` 以上CSS样式实现了菜单项的基本样式、子菜单的显示和隐藏、菜单项和子菜单的:hover样式。总之，这段代码实现了一个简单的下拉菜单，可以根据需要进行修改和扩展。

阅读全文