JS动画效果_技术问答

慕斯卡94142838

oDiv.offsetWidth 的值弹出的是202，边框给的是1，为什么是加2？？: 2021-08-13 2回答·337浏览

慕码人7760016

oDiv.style.width与oDiv.offsetWidth有什么区别？

style.width获取的元素宽度只是div的宽度，不包括border、和padding所占的宽度，且宽度值是带单位px的。

offsetWidth 获取的元素宽度为width+border+padding的值（不包括margin），且返回值只为一个数值，不带单位。

2019-05-09 2回答·1201浏览

叶丹青

这句代码是什么意思: 哪一句？还是说是这一整段？; 2018-08-30 1回答·1283浏览

慕仙5237505

为什么会大一啊？: 已采纳 cRCHAN 的回答; 有没有看完那节课？课程后面讲了，是因为盒子的原因，真正的宽度是设置的width值再加上边框的值*2（因为有左右边框）。offsetWidth读取的是width加上border的值，而style.width只是width的值。原先来说是oDiv.style.width + 2 = oDiv.offsetWidth（这里不是赋值，而是普通的相等）。实际oDiv.offsetWidth比oDiv.style.width大2像素，赋值运算的时候，虽然offsetWidth - 1了，也还是比style.width大1像素，真正算下来就是style.width不断的加。; 2017-10-31 3回答·1410浏览

慕UI1295799

如何获取样式中的初始值

var rotate=document.getElementById('id').style.transform

rotate.substring(rotate.indexOf("(")+1,rotate.indexOf("d"))

2017-10-18 2回答·1339浏览

梧桐笑

大家看看哪里出下问题了？

<!DOCTYPE html>

<html>

<head>

<title>多物体动画</title>

<style>

*{padding:0; margin:0; list-style: none;font-size: 36px;}

ul li{

width:150px;

height:80px;

line-height: 80px;

background-color: #ff8040;

margin-bottom:20px;

border:4px #c0c0c0 solid;

text-align: center;

}

</style>

window.onload=function(){

var lis=document.getElementsByTagName("li");

for(var i=0;i<lis.length;i++)

{

lis[i].timer=null; //多物体运动所有参数不能共用，包括定时器，必须给各物体都加一个定时器

lis[i].onmouseover=function(){

move(this,300);

}

lis[i].onmouseout=function(){

move(this,150);

}

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

function move(obj,target){

clearTimeout(obj.timer);

obj.timer=setInterval(function(){

var atr=parseInt(getStyle(obj,'width'));

var speed=(target-atr)/10;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(atr==target){

clearTimeout(obj.timer);

}

else{

obj.style.width=atr+speed+'px';

}

},50);

}

</script>

</head>

<body>

<ul >

</ul>

</body>

</html>

2017-09-13 1回答·883浏览

virusos

这里为什么要用parseInt？currentStyle和getComputedStyle返回什么？: 。。明明是去掉px的好吗。。。返回像素的是什么鬼？; 2017-04-16 5回答·1601浏览

Freen247

parseInt是什么意思干嘛用的

已采纳正在睡觉的回答

parseFloat() 解析一个字符串并返回一个浮点数。

parseInt() 解析一个字符串并返回一个整数。

var iNum1 = parseInt("12345red"); //返回 12345
var iNum1 = parseInt("0xA"); //返回 10
var iNum1 = parseInt("56.9"); //返回 56
var iNum1 = parseInt("red"); //返回 NaN

var fNum1 = parseFloat("12345red"); //返回 12345
var fNum2 = parseFloat("0xA"); //返回 NaN
var fNum3 = parseFloat("11.2"); //返回 11.2
var fNum4 = parseFloat("11.22.33"); //返回 11.22
var fNum5 = parseFloat("0102"); //返回 102
var fNum1 = parseFloat("red"); //返回 NaN

2017-04-07 2回答·6745浏览

精慕门7131591

这一节的源代码在哪里？

```js

<!DOCTYPE html>

<html>

<head>

<title>任意属性值2</title>

<style>

body, ul, li {

margin: 0;

padding: 0;

}

ul,li {

list-style: none;

}

ul li {

width: 200px;

height: 100px;

background: yellow;

margin-bottom: 20px;

border: 4px solid #000;

filter: alpha(opacity: 30);

opacity: 0.3;

}

</style>

window.onload = function() {

/*var aLi = document.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++){

aLi[i].timer = null;

aLi[i].onmouseover = function() {

startMove(this,400);

}

aLi[i].onmouseout = function() {

startMove(this,200);

}

}*/

var Li1 = document.getElementById('li1');

var Li2 = document.getElementById('li2');

Li1.onmouseover = function() {

startMove(this,'opacity',100);

}

Li1.onmouseout = function() {

startMove(this,'opacity',30);

}

// var timer = null;

function getStyle(obj,attr) {

if(obj.currentStyle) {

// IE

return obj.currentStyle[attr];

}else{

// Firefox

return getComputedStyle(obj,false)[attr];

}

var alpha = 30;

function startMove(obj,attr,iTarget){

clearInterval(obj.timer);

obj.timer = setInterval(function(){

var icur = 0;

if(attr == 'opacity') {

icur = Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

icur = parseInt(getStyle(obj,attr));

}

var speed = (iTarget-icur)/8;

speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(icur == iTarget) {

clearInterval(obj.timer);

}else{

if(attr == 'opacity') {

obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';

obj.style.opacity = (icur+speed)/100;

}else{

obj.style[attr] = icur + speed + 'px';

}

},30)

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

```

2017-03-14 1回答·721浏览

慕粉22264751

为什么width属性在外部嵌入和在div行内添加会得到不一样的效果呢

外部嵌入取的是offserWidth的值而offserWidth的值是包括padding和border的不仅仅是div本身的width。

内部嵌入时候通过getStyle那个函数取的行内样式取的是DIv本身的宽不加padding和border

2017-03-11 2回答·747浏览

qq_MissingYou_0

getStyle(obj,attr)

已采纳尹为者的回答

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<style>
*{
    margin:0;
    padding:0;

    }
div{
      width:200px;
      height:200px;
      background:red;
      border:4px solid black;
      }
</style>
<script>
window.onload=function(){
     var odiv=document.getElementById("div1");
     odiv.onmouseover=function(){
         startMove();
         }
    }

     var timer=null;
     function startMove(){
         clearInterval(timer);
        var odiv=document.getElementById("div1");
         timer=setInterval(function(){
             if(odiv.offsetWidth==0){
              clearInterval(timer);
             }else{
                // odiv.style.width=odiv.offsetWidth-9+'px';
                odiv.style.width=parseInt(getStyle(odiv,"width"))-1+'px';
                 }
             },30)}
    function getStyle(obj,attr){
         if(obj.currentStyle){
             return obj.currentStyle[attr];
             }else{
             return getComputedStyle(obj,false)[attr];
                 }
        }
</script>
</head>

<body>
<div id="div1" ></div>
</body>
</html>

以上，你的错误好多啊，自己对比吧

2017-02-18 3回答·3419浏览

qq_MissingYou_0

为什么我的alert(oDiv.style.width); 没有效果（offsetWidth就可以弹警告窗口）

不是没有效果，而是该值为空，可能你并没有用 JS 显式设置过

oDiv.style.width = xxx;

这样设置过，才能取到值。

2017-02-17 2回答·932浏览

银白色暴风雪

为什么不用getAttribute()？

已采纳 S01010011 的回答

你的意思是为什么不用getAttribute获取CSS样式中的属性值吗？

首先，想要获取外部/嵌入式CSS样式中的属性，getAttribute是做不到的。

getAttribute是用来获取元素上的属性的，比如id、class、用户自定义属性等等。

虽然getAttribute可以获取到内联式CSS样式的属性（返回的是整个字符串，如"color:red;"），但是获取内联式CSS样式有更好的Element.styel.xxx属性（返回的是属性的值，如"red"）。

所以获取属性值不用getAttribute不是不兼容，而是getAttribute不是用在这些的地方的。

2017-02-16 1回答·895浏览

qq_我叫红领巾_2

帮忙看一看!

var speed=(iTarget-obj.offsetWidth)/10;和 if(iTarget==obj.offsetWidth)中的 obj.offsetWidth 也要改成parseInt(getStyle(obj,'width'))

加了边框 obj.offsetWidth的值肯定会增加border*2

2017-01-01 4回答·1039浏览

qq_我叫红领巾_2

内间距外间距边框会影响！margin应该不影响吧？

想了想应该会影响吧例子是bottom 下边界如果是left和right 应该就会影响输出结果

2017-01-01 1回答·851浏览

慕粉2130563850

为什么写了这句之后，在我的浏览器里就不运动了oDiv1.style.width=parseInt(oDiv1.style.width)-1+'px';

已采纳番小由的回答

获取元素宽的时候不能直接用style.width去获取；要用offsetWidth；

oDiv1.style.width=parseInt(oDiv1.style.width)-1+'px';

你把这句改成oDiv1.style.width=parseInt(oDiv1.offsetWidth)-1+'px'; 就会动了。

2016-12-08 3回答·1146浏览

Dicrector

关于width不断增加而不是减小

已采纳写米乐的回答

样式有这俩句：其他样式不写了，主要看这俩个。

#div1{
    width:200px;
    *****
    ****
    border:1px solid #000;
}

setInterval(function(){                           //这是个定时器，30毫秒执行一次里面的函数.
    var oDiv = document.getElementById('div1');
    //获取id是div1的元素。
    oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
    //获取oDiv的宽，这时候的宽是200px+2px。因为border给俩边加了1px,实际获取到的是202px;
    //所以202px-1px=201px赋给了oDiv，这时oDiv的宽是201px;再过30毫秒执行这句，获取的oDiv的宽是
    //201px + 2px = 203px; 再203px-1px=202px赋给了oDiv。就这样。
    },30);

2016-11-06 2回答·714浏览

ZXJ03

求助！！！: 已采纳 Purplefly 的回答; 不好意思，又试了一下，object.style.width这样才是对的，也不知道刚是怎么回事。只需要在26行的width加上'’就行了; 2016-10-20 3回答·930浏览

慕粉3760367

为什么不行啊: 已采纳一个人一首歌0 的回答; getstyle封装方法两个参数之间你用的是中文输入法的“，”，改成英文输入法“,”。; 2016-10-16 1回答·690浏览

慕先生8224389

谷歌浏览器获取样式失败。。。。。: 已采纳黑色秋水的回答; getComputedStyle方法里已经有了对象参数而且此方法是定义在window下的而不是元素对象下，你前面又在元素对象下调用，所以报错；（前面"obj."去掉）; 2016-10-14 3回答·1665浏览

poudoudou

为什么要用timer=null，一定要是全局变量吗？什么时候要用到timer=null呢？有其他类似的情况吗？: 定义全局变量是方便下面做清理操作，不用定义成null，定义成啥都行，或者直接var timer；都可以的好嘛？定义成null，个人觉得更规范！; 2016-10-12 2回答·2627浏览

jazia

用js的style属性可以获得html标签的样式是不能获取非行间样式，那为什么前几节课老师可以使用啊

已采纳墨小漓的回答

首先css样式表有三种样式，

一、内联样式

在HTML标签用style属性设置，如：

<p style="color:#f90;">这是内联样式</p>

二、嵌入样式

通过<head>标签内通过<style>标签设置。如：

/*这是嵌入样式*/

.stuff{color:#f90}

</style>

三、外部样式

通过<link>标签设置。如：

而在javascript中，获取这三种样式表的方法是有限制的，style只能获取元素的内联样式，

嵌入样式和外部样式使用style是获取不到的，javascript提供了另外的获取方式，嵌入样式和外部样式可以通过currentStyle（IE浏览器）、getComputedStyle（Firefox、opera、safari、chrome浏览器）的方式获取。

使用方法分别是window.currentStyle["attr']和window.getComputedStyle(ob, pseudoElt)["attr']。

哈，其实刚开始的时候小白也不怎么懂，可能小白说的你也不是很明白，你可以参照这篇学习笔记

人家理解得可比我这半吊子水平透彻多了

( ╯□╰ )好吧，小白承认好像抄袭了，逃。。。

2016-09-22 3回答·5243浏览

Lu背水一战

为什么用parseint

已采纳 shsgear 的回答

因为oDiv.style.width=200px,结果是一个字符串，parseInt()方法可以强制将字符串转换为number类型变成200，之后再进行后面的加减操作，最后加上字符串“px”成了字符串“199px” “198px”。并不是楼上说的为了不必要的错误，而是必须要这样.

2016-09-20 2回答·1047浏览

qq_GreenOrRed_0

parseInt(oDiv.style.width)跟oDiv.offsetwidth有差别吗: 已采纳 xx001 的回答; 区别在于边框的有无，offset获取的是整个元素的宽度包括边框和内边距，而style.width获取的是元素内容的宽度就是样式表设置的width。; 2016-09-15 1回答·1148浏览

，_0022

chrome下如何获取样式是怎样的: 我的代码在IE能运行，在chrome不能; 2016-09-12 3回答·677浏览

咿呀咿呀哒哒

为什么oDiv.style.width=parseInt(oDiv.style.width)-5+'px';写这条语句没反应: 2016-08-29 1回答·1493浏览

慕瓜3177915

boder在style里又不在函数里为啥201 之后还继续加2？不断重复？: offsetWidth的值等于style.width的值加上边框的值，而函数里这样写的 oDiv.style.width=oDiv.offsetWidth-1+'px';后者是比前者多2px的，只要减去的数值小于2，那么前者就相当于一直增大，而后者包含前者，所以后者也一直增大，导致的结果就是图像越来越宽。希望对你有所帮助~; 2016-08-29 2回答·579浏览

qq_Desperado_19

请问这里的parseint是干嘛的?起到了什么作用？: 获取整点样式; 2016-08-26 2回答·690浏览

Jade2_

obj.offsetWidth和obj.style.width变长变短的问题: 已采纳 Collus 的回答; 先明确两个概念：obj.offsetWidth是盒子模型中盒子的宽度（content+2*padding+2*border）。obj.style.width只是content的宽度（即写在CSS样式中的width的值）。假设padding=0，如果设置了宽度为1px的border，那么obj.offsetWidth的值就是content的宽+2px，obj.offsetWidth-1的值就是content的宽+1px.因此会变长。而obj.style.width-1，的值就是content长度减1，所以越来越短。; 2016-08-03 2回答·1468浏览

任性不是罪

背景颜色怎么改变？？？？？

已采纳 Dling 的回答

随机产生一个6位数

var rand=Math.round(Math.random()*1000000);
/*
	   如果不够六位数前面补0；
	   slice() 方法可从已有的数组中返回选定的元素。
	   arrayObject.slice(start,end)

*/
rand = rand<1000000?(rand+1000000 +'').slice(1):rand;
div.style.backgroundColor = "#"+rand;

2016-07-26 4回答·914浏览