版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/czh500/article/details/84947249
javascript案例,专辑前6名
看下面的截图和代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript案例,专辑前6名案例,雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="top6.css"/>
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">
body {
padding: 0;
margin: 0;
}
*{
/*不把边框，padding(内边距)计算进去*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
opacity:1.0;
}
</style>
<script type="text/javascript">
//初始化(加载所有专辑图片)
function initAllImg(){
var divNode = document.getElementById("allImg");//获取专辑div层
var imgSrc = "imgTop6" + "/"; //图片路径
var imgSuffix = ".jpg"; //图片后缀
for (var imgName = 1; imgName <= 25; imgName++) {
//var imgNode = new Image(); //也可以使用new的方式创建图片元素对象
var imgNode = document.createElement("IMG");//创建图片元素对象
imgNode.src = imgSrc + imgName + imgSuffix;
imgNode.title = "专辑" + imgName;
imgNode.width = 320;
imgNode.height = 200;
imgNode.style.borderRadius = "12px";
imgNode.className = "imgNormal";
imgNode.onmouseout = imgOnmouseout;
imgNode.onmouseover = imgOnmouseover
imgNode.onclick = imgOnclick_Top6;
divNode.appendChild(imgNode);////将图片添加到div层中
/*
//创建数字span
var spanNode = document.createElement("span");
spanNode.appendChild(document.createTextNode("周杰伦"));
spanNode.className = "num";
divNode.insertBefore(spanNode, imgNode);
*/
}
}
//鼠标从图片上移出时的效果
function imgOnmouseout(){
this.className = "imgNormal";
//alert("鼠标从图片上移出时 = " + this);
}
//鼠标移入到图片上时的效果
function imgOnmouseover(){
this.className = "imgHover";
}
//将图片专辑加入到前6名的div层中
function imgOnclick_Top6(){
var top6DivNode = document.getElementById("top6");
console.log("top6div层的高=" + getComputedStyle(top6DivNode, null).getPropertyValue("height"));
var MyChilds = top6DivNode.childNodes;
var childsCount = MyChilds.length;//获取前6名的div层中的子节点个数
var count = 0; //已选择了的专辑的数量
for (var index = 0; index < childsCount; index++) {
// if (MyChilds[index].nodeName.toUpperCase() == "IMG") {
// count++;
// }
if (MyChilds[index].nodeName.toUpperCase() == "DIV") {
count++;
}
}
if (count >= 6) {
alert("对不起，您只能选择6张专辑！");
return;
}
var finalStyle = this.currentStyle ? this.currentStyle
: document.defaultView.getComputedStyle(this, null);
var divNode = document.createElement("div");
console.log(getComputedStyle(divNode, false)["opacity"]);
divNode.style.opacity = "1.0";
divNode.style.position = "relative";
divNode.style.padding = "0px";
divNode.style.display = "inline-block";
divNode.style.margin = "20px";
// divNode.style.width = finalStyle.getPropertyValue("width");
// divNode.style.height = finalStyle.getPropertyValue("height");
divNode.style.border = "none";
divNode.style.backgroundColor = "transparent";
divNode.style.width = "auto";
divNode.style.height = "auto";
console.log("看看宽高是否会带px=" + divNode.style.width);
/*
如下这样获取width和height得到的值不准确，因为受到鼠标移上去的影响，导
致图片width和height比原来的width和height更小了(受到样式的影响，不把边
框，padding(内边距)计算进去)
*/
console.log(this.className + " - " + this.src + " - 图片的宽=" + this.width
+ " - 高=" + this.height + "-this=" + this);
console.log("宽=" + finalStyle.getPropertyValue("width") + " /高="
+ finalStyle.getPropertyValue("height"));
divNode.appendChild(this);//将专辑图片移动到这个层中
top6DivNode.appendChild(divNode);
this.className = "imgNormal";
this.style.margin = 0;
// this.style.padding = 0;
//创建数字span
var spanNode = document.createElement("span");
spanNode.appendChild(document.createTextNode("NO" + (count + 1)
+ "-new"));
spanNode.className = "num";
// alert("this=" + this);
divNode.insertBefore(spanNode, this);
//创建醒目的span(醒目的显示免费2个字)
var spanNode2 = document.createElement("span");
spanNode2.appendChild(document.createTextNode("免费"));
spanNode2.className = "striking";
divNode.insertBefore(spanNode2, this);
//创建醒目的span(醒目的显示免费2个字)
var spanNode3 = document.createElement("span");
spanNode3.appendChild(document.createTextNode("vip"));
spanNode3.className = "vip";
divNode.insertBefore(spanNode3, this);
top6DivNode.style.height = "auto";
this.onclick = imgRemoveTop6;
}
//把前6的专辑图片从top6这个层中移回到allImg层中
function imgRemoveTop6() {
var top6DivNode = document.getElementById("top6");
var MyChilds = top6DivNode.childNodes;
var childsCount = MyChilds.length;//获取前6名的div层中的子节点个数
console.log("childsCount=" + childsCount);
if (childsCount <= 1) {
top6DivNode.style.height = "250px";
}
var divNode = document.getElementById("allImg");//获取专辑div层
// this.parentNode.removeChild(this.previousSibling);//删除数字span节点
this.parentNode.parentNode.removeChild(this.parentNode);
// this.style.margin = "20px";
console.log("style=" + this.getAttribute("style") + " / " + this.getAttributeNode("style"));
// this.removeAttributeNode(this.getAttributeNode("style"));
// this.removeAttribute("style");
this.style.removeProperty("margin");
divNode.appendChild(this);
this.className = "imgNormal";
//alert( "我是 = " + this);
//如果在这里调用imgOnmouseout()函数，那么此时在imgOnmouseout()函数中的this就代表window对象
//imgOnmouseout();
this.onclick = imgOnclick_Top6;
resetSpanNodText();
}
//把top6这个层中现有的图片的顺序重新排列一下
function resetSpanNodText() {
var number = 0;
var top6DivNode = document.getElementById("top6");
var MyChilds = top6DivNode.childNodes;
var childsCount = MyChilds.length;//获取前6名的div层中的子节点个数
for (var index = 0; index < childsCount; index++) {
if (MyChilds[index].nodeName.toUpperCase() == "DIV") {
number++;
MyChilds[index].childNodes[0].innerHTML = "NO" + number + "-new";
}
// if (MyChilds[index].nodeName.toUpperCase() == "SPAN") {
// number++;
// MyChilds[index].innerHTML = "NO" + number + "-new";
// }
}
}
</script>
</head>
<body onload="initAllImg()">
<a href="http://www.baidu.com" target="_blank">
百度搜索(getComputedStyle获得外部的css样式，不知道能否删除外部的css样式中的属性?)
</a>
<a href="https://www.cnblogs.com/whchensir/p/5743521.html" target="_blank">
删除元素中的style中的单个属性(元素对象.style.removeProperty('style中的属性名');)
</a>
<a href="http://www.cnblogs.com/susufufu/p/5749922.html" target="_blank">
删除行内样式的style中的某个属性
</a>
<a href="https://blog.csdn.net/charlene0824/article/details/50532908" target="_blank">
元素对象.style.removeProperty('style中的属性名');
</a>
<a href="https://www.jb51.net/article/132341.htm" target="_blank">
移除style中的单个属性
</a>
<div id="caption" class="header" style="width: 100%;height: 150px;">
<h2 style="color: white;font-family: 楷体;">请您选出心目中的6佳专辑！(单击图片即可)</h2>
</div>
<br>
<div id="top6" style="height: 250px;position: relative;"></div><br>
<!-- <fieldset> -->
<!--<legend>专辑列表:</legend>-->
<!--<font color="black" style="position: relative; top: -10px; left: 10px; background-color: White">
专辑列表:</font>-->
<!-- 在div控件的边框上写文字的效果，还不是很明白怎么实现这种效果，这里先放一放，有时间再研究吧，这几天还有其他一些事情要赶进度处理，有空再研究这个问题 -->
<span class="title" style="z-index: 2000;background-color: #CD0000;color: white;border-radius: 6px;">专辑列表</span>
<div id="allImg" class="album">
</div>
<!--</fieldset>-->
<div class="myTest1">div1</div>
<div class="myTest1">div2</div>
<div class="myTest1">div3</div>
<div class="myTest1">div4</div>
<input id="test1" value="一万年太久只争朝夕" type="text" alt="hello" size="66" height="300px" style="border-radius: 15px;width: 100%;height: 60px;background-color: #ea9393;border:5px solid #4B0082;font-size: 36px;">
<input type="button" onclick="testRemoveAttribute()" value="测试RemoveAttribute(删除style中的属性)">
<div id="myDiv1" style="width: 100%;background-color: #d4c4df;border: solid 5px #CD0000;">
<span id="span1">
<input style="margin: 20px;width: 900px;height: 50px;border: solid 5px #CD0000;font-size: 30px;border-radius: 12px;" type="text" id="text1" value="天若有情天亦老(点击我就会移动我的位置)" onclick="testMyself(this)">
</span>
</div>
<div id="myDiv2" style="width: 100%;border: solid 5px #0000AA;margin-top: 20px;background-color: #C5C1AA;">
</div>
<div style="background-color:#825ce6;width: 600px;height: 200px;border: solid 6px #CD0000;margin:30px;display: inline-block;color: white; font-size: 20px;vertical-align: top;font-weight: bold;">
测试margin是不是从元素的边框开始算的
</div>
<div style="background-color:#825ce6;width: 600px;height: 200px;border: solid 30px black;margin:30px;display: inline-block;color: white; font-size: 20px;vertical-align: top;font-weight: bold;">
测试margin是不是从元素的边框开始算的
</div>
<div style="width: 100%;height: auto;border:5px solid #551A8B!important;background-color:#EEEED1!important;padding: 20px;opacity:1.0;">
<p align="justify" style="color: #0000AA; font-size: 20px;">
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝。
独立寒秋，湘江北去，橘子洲头。
看万山红遍，层林尽染；
漫江碧透，百舸争流。
鹰击长空，鱼翔浅底，
万类霜天竞自由。
怅寥廓，问苍茫大地，谁主沉浮？
携来百侣曾游，
忆往昔峥嵘岁月稠。
恰同学少年，风华正茂；
书生意气，挥斥方遒。
指点江山，激扬文字，
粪土当年万户侯。
曾记否，到中流击水，浪遏飞舟！
</p>
</div>
</body>
<script type="text/javascript">
function testRemoveAttribute(){
var textNode = document.getElementById("test1");
// textNode.removeAttributeNode("style");//报错，因为参数需要的是一个对象，所以不能传字符串
// textNode.removeAttribute('style');
// textNode.removeAttributeNode(textNode.getAttributeNode("style"));
// var result = textNode.removeAttributeNode(textNode.getAttributeNode("style"));
// console.log(result);
console.log(textNode.style);
console.log(textNode.getAttribute("style"));
console.log(textNode.getAttributeNode("style"));
console.log(textNode.getAttribute("style"));
console.log(textNode.getAttributeNode("size"));
console.log(textNode.getAttribute("size"));
textNode.removeAttributeNode(textNode.getAttributeNode("alt"));
textNode.removeAttribute("width");
textNode.removeAttribute("height");
// textNode.removeAttribute("size");
textNode.removeAttribute(textNode.getAttributeNode("size"));
textNode.style.removeProperty("width");
}
function testMyself(obj){
if (!document.getElementById("span1")) {
return;
}
// obj.parentNode.parentNode.removeChild(obj.parentNode);
// document.getElementById("myDiv2").appendChild(obj);
// document.getElementById("myDiv2").appendChild(obj);
document.getElementById("myDiv2").appendChild(document.getElementById("text1"));
document.getElementById("myDiv1").removeChild(document.getElementById("span1"));
// document.getElementById("myDiv2").appendChild(document.getElementById("text1"));
// document.getElementById("myDiv2").appendChild(obj);
}
</script>
</html>