精华内容
下载资源
问答
  • getByClass() 这个方法写的有问题,你这个...var s = getByClass('li'); 但是你用的是 li,是tagNamefunction changeshow(){var p = getByClass('showmenu'); 这里用的是classNamep.style.display = "";p是数组 jq...

    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修改CSS样式

    万次阅读 2019-08-03 08:25:19
    通过JS修改CSS样式有两种方法: 修改某一属性的值 修改某一元素的class名,使其被别的样式修饰 修改某一属性的值 <!DOCTYPE html> <html> <head> <meta ...

    通过JS修改CSS样式有两种方法:

    1. 修改某一属性的值
    2. 修改某一元素的class名,使其被别的样式修饰

    修改某一属性的值

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<title></title>
    	<script type="text/javascript">
    		function changeBg(){
    			var bgColor="";
    			for(var i = 0;i<6;i++){
    				bgColor += ""+Math.round(Math.random()*9);
    			}
    			document.body.style.backgroundColor="#"+bgColor;
    		}
    		document.onclick = changeBg;
    	</script>
    </head>
    <body>
    
    </body>
    </html>

    如上,通过for循环建立一个6位数字构成的字符串再加上#,形成能够作为颜色属性的字符串(颜色有一种表达方式就是这样。如:#324254),然后将这个值赋给body的样式属性background-color(JS中写法位backgroundColor),达到我们修改样式的目的

    修改某一元素的class名

    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<title></title>
    	<script type="text/javascript">
    		function chg(){
    			document.getElementById("up").className="solid";
    		}
    	</script>
    	<style type="text/css">
    		.solid{
    			width: 160px;
    			padding: 6px;
    			text-align: center;
    			border-right: #222 4px solid;
    			border-top: 4px solid #ddd;
    			border-left: 4px solid #ddd;
    			border-bottom: 4px solid #222;
    			background-color: #ccc;
    		}
    	</style>
    </head>
    <body>
    	<div id="up">whoami</div>
    	<input type="button" name="a" value="点击" onclick="chg();">
    </body>
    </html>

    通过 JS,将id为“up”的元素的class名改为solid,使其被.solid样式修饰,达到我们修改样式的目的

    以上两种方式能够达到我们修改元素样式的目的

     

    希望能够帮助大家,如果有错,欢迎大家批评指正,也欢迎将不懂的地方评论出来,我们一起讨论学习

    展开全文
  • getByClass() 这个方法写的有问题,你这个...var s = getByClass('li'); 但是你用的是 li,是tagNamefunction changeshow(){var p = getByClass('showmenu'); 这里用的是classNamep.style.display = "";p是数组 jq...

    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标签后应该显示的

    展开全文
  • Test window.onload = function () { var myul = document.getElementById("ulme"); var myli = myul.getElementsByTagName("li"); alert(myli.length);
    <!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>Test</title>
        <script type="text/javascript">
            window.onload = function () {
                var myul = document.getElementById("ulme");
                var myli = myul.getElementsByTagName("li");
    
                alert(myli.length);
                for (var j = 0; j < myli.length; j++) {
                    myli[j].style.border = "1px solid #000";
                }
                var every=document.getElementById("everywhere");
                every.parentNode.removeChild(every);
    
            }
        </script>
    </head>
    
    <body>
        <ul id="ulme">
            <li id="everywhere">It can be found everywhere.</li>
            <li class="test">It's easy to use.</li>
            <li class="test">It can help you to find what you want,really quickly.</li>
        </ul>
    
    </body>
    </html>



    不知道为什么直接用documnet.getElementsByTagName("li")就不行。

    展开全文
  • javascript 动态修改css样式方法汇总(四种方法)发布于 2017-02-24 18:05:13 | 106 次阅读 | 评论: 0 | 来源: 网友投递JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于...
  • 直接修改页面上的样式li 例子js代码: var l=$("li"); var pagenum=10; var lens=l.length; var totalpage=Math.ceil(lens/pagenum); function changepage(page) { page=parseInt
  • 20210525JS修改样式

    2021-05-25 13:16:23
    1.JS通过style修改内联样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport...
  • js 修改alert 样式

    2011-08-22 14:35:24
    &lt;!-- End .list --&gt;&lt;!-- &lt;div class="bottom"...js改变 alert 样式。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  • JavaScript修改标签样式的属性值 修改界面上一个div的长宽,并使它一直变大 效果图: 变大: 代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...
  •   JS初学者操作,大佬发现错误请不吝指正。只看解决方法请直接到3。 文章目录1. 修改display导致的transition失效(未解决问题)2. 没有设置初始值导致过渡失效(未解决问题)3. 最后解决的方法(成功)   这个问题...
  • JS实现css hover操作的方法示例发布时间:2020-09-01 14:46:32来源:脚本之家阅读:118作者:谢玉胜本文实例讲述了JS实现css hover操作的方法。分享给大家供大家参考,具体如下:hover我们可以用css的方式写,当然,...
  • js如何修改伪类样式如before或after

    千次阅读 2019-07-29 15:46:07
    通过js创建一个内嵌样式表,并添加需要修改的伪类样式,覆盖原始的伪类样式。 介绍 html代码 <ul>  <li>apple</li>  <li>banana</li>  <li>pear</li> </ul>...
  • js中cssText批量修改元素样式

    千次阅读 2017-05-11 16:57:18
    平常编写代码,更改一个元素样式的时候,自己都是用obj.style.width = "200px"; obj.style.position = "absolute"; obj.style.left = "100px...使用Javascript批量修改样式的方法: cssText 的使用: obj.cssText =
  • 我们公司的项目都是要兼容到ie8的,ie8的...于是我在网上下了一段代码,在外面运行是可以的,但是放到我的项目里死活都有问题,后来我就稍稍修改了一下原本的js文件,来实现我想要的效果。 简单的说就是将原来的...
  • 通过“鼠标滑过”事件触发js函数,修改特定元素样式 在一些极端特殊情况,需要在鼠标滑过当前元素的情况下修改其他特定元素属性,此时css自带的hover已经不能满足需求。 题目:如下图所示,当鼠标移动到“嘤嘤怪”时...
  • body {background-image: url('img/1.jpg') no-...}li {width: 80px;height: 50px;position: left;margin: 100px auto;}.selected {border: 5px solid red;}// 获取含img tag的element对象的伪数组var imgs = d...
  • 选中当前li改变颜色,删除其他li的选中样式。再次点击选中的li,将去除选中样式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • 这两天仿写了一个网站,html页面的样式都是引入的外联样式,结过用js获取元素后,通过修改元素的left值来实现轮播怎么也实现不了,在网上找了很久相关的知识也没弄明白到底怎么纠正,只弄明白了可以用currentStyle/...
  • vue.js li 切换样式

    千次阅读 2018-08-25 10:48:11
    选中效果 ul li { text-decoration: none; } ul li.active{ color: red; }
  • 1. 修改样式属性(小) 修改样式属性有两种方式,改动小的话直接就是.style进行修改就可以了,改动大的话,就是用类选择器进行修改。 <!DOCTYPE html> <html lang="en"> <head> <meta charset...
  • js遍历li并动态更换下级节点的样式

    千次阅读 2017-12-16 19:43:40
    js遍历li并动态更换下级节点的样式 <li class="li">321 <li>123</li> <li>123</li> </li> <li class="li">321
  • ... &lt;script language="javascript" type="text/javascript"&gt;  window.alert = function(txt)  {  var shield = document.createElement("DIV");  shiel...
  • [code="js"]window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "abs...
  • 在不能修改HTML和CSS的前提下,如果要用JS修改伪类可以这样做: 原本的代码: <style> li:before{content:"·"} </style> <ul>  <li>日曜日</li>  <li>月曜日</li&...
  • js动态修改整个页面样式(换肤)

    千次阅读 2014-05-22 15:12:27
    js动态修改整个html页面样式(换肤).html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,183
精华内容 16,873
热门标签
关键字:

js修改li样式