Javascript: Refere to Div Tags
I have a CSS style sheet that has the following:
div.box img {
width:100px;
height:100px;
border:1px solid;
display:inline;
}
This div tag basically re-sizes my image. My HTML file has the following:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript">
function doMove(){
//move object
}
</script>
</head>
<body>
<h1>JavaScript Animation</h1>
<div class="box">
<img sr开发者_Go百科c="dp.png"/>
</div>
I want to be able to move this box to the left once doMove() is called. How do i refer to my DIV tag in my stylesheet in javascript?
Assuming that you want only the div with the class-name of box:
var divs = document.getElementsByTagName('div');
var divsNum = divs.length;
for (i=0; i<divsNum; i++){
if (divs[i].className == 'box'){
divs[i].style.marginLeft = '-100px';
}
}
JS Fiddle demo.
If you're just trying to move that one div, the easiest thing would be to assign an id to that div:
<div id="box1" class="box>
And then to reference that div in your javascript, you would do:
var box1 = document.getElementById("box1");
<div id="yourDiv" class="box">
<img src="dp.png"/>
</div>
function doMove(){
var yourDiv = document.getElementById("yourDiv");
}
加载中,请稍侯......
精彩评论