>웹 프론트엔드 >JS 튜토리얼 >Js는 div_javascript 팁을 동적으로 생성합니다.

Js는 div_javascript 팁을 동적으로 생성합니다.

WBOY
WBOY원래의
2016-05-16 19:00:361086검색

这是原来的CSS样式
.item{float:left;overflow:hidden;margin-left:8px;margin-top:10px;width: 320px; 높이:
250px;배경 반복: 반복 없음; 배경 이미지:url(../images/bgred.jpg)}
.curve{position:relative;width:320px; 높이:250px; Z-색인:1; 왼쪽: 75px; top: -40px;}
动态创建DIV代码如下:
for(j = 0;j*8 {
var mydiv = window.frames["displayFrame "].document.createElement("div");
mydiv.setAttribute("id","itemdiv" j);
mydiv.style.styleFloat="왼쪽";
mydiv.style.overflow="숨김";
mydiv.style.marginLeft="8px";
mydiv.style.marginTop="10px";
mydiv.style.width="320px";
mydiv.style.height="250px";
mydiv.style.BackgroundRepeat="반복 없음";
mydiv.style.BackgroundImage="url(image/bgred.jpg)"
window.frames["displayFrame"].document.body.appendChild(mydiv);
var curveiv =window.frames["displayFrame"].document.createElement("div");
curvediv.setAttribute("id","curvediv" j);
curvediv.style.position="relative";
curvediv.style.zIndex=1;
curvediv.style.left="75px";
curvediv.style.top="-40px";
curvediv.style.width="320px";
curvediv.style.height="250px";
window.frames["displayFrame"].document.getElementById("divitem" j).appendChild(curvediv);
}
把div元素增加到HTML면.
HTML리면정정义一个SPAN
window.frames["displayFrame"].document.getElementById("spanId").appendChild(mydiv);
window.frames["displayFrame"].document.body.appendChild(mydiv);
IE와 Firefox는 支持.
야외 웹사이트에서 볼 수 있는 CSS 위안
浮动效果:float:left
IE下代码为:mydiv.style.styleFloat="left";
Firefox 대표: mydiv.style.cssFloat="left"; 关于大写敏感问题没有仔细研究.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.