javascript学习笔记0829 改变样式表的样式属性等

最新推荐文章于 2024-05-21 21:29:52 发布

jody_xx

最新推荐文章于 2024-05-21 21:29:52 发布

阅读量164

点赞数

分类专栏： js html css 文章标签： javascript

本文链接：https://blog.csdn.net/ahuan08/article/details/100141223

版权

html 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<head>
<title>提示框CSS实现</title>
<meta charset="utf-8">
<style>
.tp{
display:inline-block;
}
.tooltip{
visibility:hidden;
background-color:orangered;
color:#efefef;
border-radius:6px; /*圆角实现方法*/
padding:0 5px;
}
.tp:hover .tooltip{
visibility:visible;
}
hr{
border:0;
color:#d4d4d4;
background-color:#d4d4d4;
height:1px;
}
#mycss{
border:1px solid red;
border-radius:5px;
}
</style>
</head>
<body>
<h3>鼠标经过显示提示信息</h3>
<p class="tp">鼠标经过这里<span class="tooltip">很高兴见到你！</span></P>
<hr>
<h3>示例2：超过字数的字符用省略号代替</h3>
<p id="txt">超过10个字的部分省略超过10个字的部分省略超过10个字的部分省略超过10个字的部分省略</p>
<p id="subtxt"></p>
<hr>
<h3>为 JSON 字符串创建对象</h3>
<p id="demo"></p>
<hr>
<h3>通过定位样式表位置增加或修改CSS属性值</h3>
<p id="mycss" οnmοuseοver="changeCss()" οnmοuseοut="mycss_mouseout()" >鼠标经过样式改变</p>
<hr>
</body>
<script>
window.οnlοad=function(){
limitTxt("txt",10,"subtxt");
}
function limitTxt(eleID,num,aimID){
var txt=document.getElementById(eleID).innerHTML;
//console.log(txt);
//console.log(txt.substr(0,num));
var subtxt=txt.substr(0,num)+"……";
//console.log(subtxt);
document.getElementById(aimID).innerText=subtxt;
}

//Json实例
var text = '{ "sites" : [' +
   '{ "name":"Runoob" , "url":"www.runoob.com" },' +
   '{ "name":"Google" , "url":"www.google.com" },' +
   '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; //JSON字符串

obj = JSON.parse(text); //使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象
for(var i=0;i<obj.sites.length;i++){
var p1=document.createElement("span"); //创建一个新的HTML元素<span></span>
p1.innerHTML=obj.sites[i].name+" "+obj.sites[i].url;
var br1=document.createElement("br"); //创建一个新的元素<br>
var demo=document.getElementById("demo");
demo.appendChild(p1); //将新创建的元素添加到已有元素下面
demo.appendChild(br1);
}
//通过直接改变样式表的属性改变网页元素的样式
function changeCss(){
var declaration=document.styleSheets[0].cssRules[4].style;
declaration.setProperty("background-color","yellow");
declaration.setProperty("border","0");
}
function mycss_mouseout(){
var declaration=document.styleSheets[0].cssRules[4].style; //样式表1的第5条样式规则（从0开始）即#mycss样式
declaration.setProperty("background-color","white");
declaration.setProperty("border","1px solid red");
}
</script>
</html>