style.top 在变为什么 对应元素位置可以不变?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <title>Document</title>
    <!-- <script src="./demo/jquery.min.js"></script> -->
  </head>
  <style lang="">

    *{
        margin: 0;
        padding: 0;
      }

    body{
      /*height: 1000px;*/
      /*position: relative;*/
      /*margin:0px;
      padding:0px;*/
    }
    .point {
      position: absolute;
      border: 5px solid red;
    }

    .ball{
      width:4px;
      height:4px;
      /*background: #d9fe37;*/
      background: red;
      border-radius: 50%;
      position: absolute;
    }

    #sketchPad{
        /*width: 400px;
        height: 400px;*/
        /*left: 100px;
        top: 100px;*/
        /*background-color: #ff0;
        overflow: auto;*/
        /*position: relative;*/
     }

    .small{
        position: relative;
        height: 300px;
        overflow: auto;
      }

    .small img{
        height: 300px;
      }

    #selectImage{
      left: 200px;
      top: 500px;
      position: absolute;
    }

    .box{
        width: 300px;
        height: 300px;
        margin: 100px;
        border: 1px solid #ccc;
        position: relative;
        /*overflow: auto;*/
      }

    .big{
        width: 600px;
        height: 600px;
        position: absolute;
        top: 0;
        left: 560px;
        border: 1px solid #ccc; 
        overflow: auto;
        /*display: none;*/
        display: block;
        background-color: #eee;
      }

    .big::-webkit-scrollbar{
      display: none;
    }

    .mask{
      width: 50px;
      height: 50px;
      background: rgba(255,255,0,0.4);
      position: absolute;
      top: 0;
      left: 0;
      /*鼠标的样式*/
      cursor: crosshair;
      display: none;
    }

    .big img{
      position: absolute;
      height: 3600px; /*box.height*big.width/mask.width */
      top: 0;
      left: 0;
    }

    .aim{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      margin-left: -10px;
      height: 20px;
      margin-top: -10px;
      display: block;
      /*z-index: 8*/
    }

    .aim__ver{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 40px;
      margin-top: -20px;
      margin-left: -1px;
      background-color: #f00;
    }

    .aim__hor{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 2px;
      margin-top: -1px;
      margin-left: -20px;
      background-color: #f00;
      }
    </style>
  <body>
    <div class="box" id="fdj">
      <div id="sketchPad" class="small">
        <img id='imageID' name='imageID' src=" " alt="">
        <div class="mask"></div>
      </div>

      <div class="big">
          <img  id='imageIDBig' name='imageID' src=" "/>
          <div class="aim">
            <div class="aim__ver"></div>
            <div class="aim__hor"></div>
          </div>
      </div>
    </div>
    <div id="selectImage">
      <form name="form" id="form" method="post" enctype="multipart/form-data" style="display: block;padding:2px;overflow: hidden;" >
      <input type="file" name="upload" id="upload" style="display: none;"
      onchange="document.form.path.value=this.value;selectImage(this)" 
      multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" />
      <input name="path" id="path" readonly style="display: block;float:left;margin-left:120px;height:24px">
      <input type="button" value="请点击上传需要进行测量的图片" onclick="document.form.upload.click();"  style="display: block;float:left;margin-left:10px;height:30px">
      </form>
    </div>

    <button id="myBtn">创建连线</button>
  </body>
  <script>
  document.getElementById("myBtn").onclick = function(event) {
    document.getElementById("sketchPad").style.cursor="crosshair";
    document.getElementById("sketchPad").addEventListener("click", createLine, false);
    event.stopPropagation();
    // 阻止冒泡 

  };

  // 1. 获取外面的父级盒子
  var fdj = document.getElementById("fdj");

  // 2.获取小的图片
  var small = fdj.children[0];
  var smallImage = small.children[0];
  // 3.获取容纳大图片的盒子
  var big = fdj.children[1];
  // 4.获取遮罩
  var mask = small.children[1];
  // 5.获取大的那张图片
  var bigImage = big.children[0];

  // 6.鼠标经过小的图片的时候显示
  small.onmouseover = function(){
    mask.style.display = "block";
    big.style.display = "block";
  }
  // 7. 鼠标离开时隐藏
  small.onmouseout = function(){
    mask.style.display = "none";
    big.style.display = "none";
  }

  console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft);
  var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2);
  var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2);

  function createLine() {
    var sketchPad=document.getElementById("sketchPad");
    var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2);
    var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2);
    // console.log("sketchPad_scrollLeft",sketchPad.scrollLeft);
    let radius=2;//半径

    let pointHtmlStr = `<div style="position:absolute;border-radius: 50%;background: red;width:${radius*2}px;height:${radius*2}px;top:${event.pageY-radius-sketchPad_top+sketchPad.scrollTop-fdj_marginTop}px;left:${event.pageX-radius-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft}px;"></div>`;
    sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr;

    let firstPoint = {};
    firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft;
    firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop;
    // console.log("firstPoint1:"+firstPoint.xPoint);

    function createPoints(event) {
      var sketchPad=document.getElementById("sketchPad");
      let secondPoint = {};
      secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft;
      secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop;
      let lineLength = calcLine(firstPoint, secondPoint);
      let angle = getAngle(
        firstPoint.xPoint,
        firstPoint.yPoint,
        secondPoint.xPoint,
        secondPoint.yPoint
      );
      // 设置一个div 宽度为 两点之间的距离,并且以 transform-origin: 0 50% 为圆心旋转,角度已经算出来
      let lineHtmlStr = `<div style="position:absolute;border-top:1px solid red;width:${lineLength}px;top:${firstPoint.yPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 0;"></div>`;

      // let bodyDiv = document.getElementsByTagName("body")[0];
      // // 添加到body 后面
      // bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr;
      sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr;
      // 取消本段的起始点的监听
      document.getElementById("sketchPad").removeEventListener("click", createPoints);
    }

    // 计算连线长度
    function calcLine(firstPoint, secondPoint) {
      // 计算出两个点之间的距离
      let line = Math.sqrt(
        Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) +
          Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2)
      );
      // console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint);
      // console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint);
      // console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint);
      // console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint);
      console.log("line:",line);
      return line;
    }
    // 计算角度
    // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角
    function getAngle(x1, y1, x2, y2) {
      // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角
      var x = x1 - x2;
      var y = y1 - y2;
      var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
      var cos = y / z;
      var radina = Math.acos(cos); // 用反三角函数求弧度
      var angle = 180 / (Math.PI / radina); // 将弧度转换成角度
      if (x2 > x1 && y2 === y1) {
        // 在x轴正方向上
        angle = 0;
      }
      if (x2 > x1 && y2 < y1) {
        // 在第一象限;
        angle = angle - 90;
      }
      if (x2 === x1 && y1 > y2) {
        // 在y轴正方向上
        angle = -90;
      }
      if (x2 < x1 && y2 < y1) {
        // 在第二象限
        angle = 270 - angle;
      }
      if (x2 < x1 && y2 === y1) {
        // 在x轴负方向
        angle = 180;
      }
      if (x2 < x1 && y2 > y1) {
        // 在第三象限
        angle = 270 - angle;
      }
      if (x2 === x1 && y2 > y1) {
        // 在y轴负方向上
        angle = 90;
      }
      if (x2 > x1 && y2 > y1) {
        // 在四象限
        angle = angle - 90;
      }
      return angle;
    }
    // 解决第一次绑定的时候执行方法
      // setTimeout(function() {
    // document.removeEventListener("click", createPoints);
    // 添加节点
    document.getElementById("sketchPad").addEventListener("click", createPoints, false);  // 在冒泡过程中处理函数
      // }, 0);
  }
    //加载任意图片
  function selectImage(file) {
    if (!file.files || !file.files[0]) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        document.getElementById('imageID').src = evt.target.result;
        document.getElementById('imageIDBig').src = evt.target.result;
        image = evt.target.result;
    }
    reader.readAsDataURL(file.files[0]);
  }

  // 8 鼠标移动
  // var x = 0;
  // var y = 0;

  small.onmousemove = function(event){
    // console.log("mask_display = ", mask.style.display);
    // console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width);

    var event = event || window.event;
    // 9.获取在盒子内部的坐标    本身定位了,这里换用父亲边框到body边框的距离  显示在遮罩的中间
    var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ;
    var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop;

    console.log("x = ",x);
    console.log("y = ",y);
    // console.log("mask_width=",mask.style)
    // 10.增加限制条件
    if(x < 0){
      // x = 0;
    }else if(x > small.offsetWidth - mask.offsetWidth){
      // x = small.offsetWidth - mask.offsetWidth;
    }
    if(y < 0){![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376605_799804.png)

      // y = 0;
    }else if(y > small.offsetHeight - mask.offsetHeight){
      // y = small.offsetHeight-mask.offsetHeight;
    }

    mask.style.left = x+ "px";
    mask.style.top = y + "px";
    console.log("mask.style.left = ",mask.style.left);
    console.log("mask.style.top = ",mask.style.top);
    console.log(document.getElementsByClassName("mask")[0]);
    // 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位,后来想想只有定位的盒子才有top/left值

    var mask_height=window.getComputedStyle(mask).getPropertyValue('height');
    var mask_width=window.getComputedStyle(mask).getPropertyValue('width');
    var big_height=window.getComputedStyle(big).getPropertyValue('height');
    var big_width=window.getComputedStyle(big).getPropertyValue('width');

    bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px";
    bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px";
  }

  // console.log("x=",x);
  // console.log("y=",y);
  </script>
</html>

这是一个自己的小练习,目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。

出现的问题是:点击左下角【创建连线】按钮并点击图中某位置,选中第一个标记点后,通过354-355行中代码设置,在控制台明明看到x和y都在随着鼠标移动不断更新,但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼,希望指教下 element.style.top和element.style.left控制css属性失效的原因

![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376642_585681.png)
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
为什么这里的imgList.style.left = 0 +"px"; 不生效?

在使用js实现html轮播图的时候想要在最后一张图的时候跳回第一张图,就是一直向右移动,但是设置imgList.style.left = 0 明明执行了却没生效,轮播到最后一张图片的时候会往回移动,像倒车一样。下面是页面代码 ``` <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #imgBox{ width: 516px; height: 333px; background-color: greenyellow; padding: 8px 0; margin: 50px auto; overflow: hidden; position: relative; } #imgList{ list-style: none; position: absolute; } #imgList li{ float: left; padding: 0 8px; } #imgNav{ position: absolute; bottom: 20px; } #imgNav a{ width: 15px; float: left; height: 15px; background-color: pink; opacity:0.6; margin: 0 5px; } #imgNav a:hover{ background-color:rgb(24, 136, 241); } </style> <script src="js/tool.js"></script> <script> window.onload = function(){ var imgBox = document.getElementById("imgBox") var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); //设置imgNav的宽度 imgList.style.width = imgBox.offsetWidth*imgArr.length + "px"; var imgNav = document.getElementById("imgNav"); //获取imgNav中所有的A var allA = document.getElementsByTagName("a"); //设置imgNav居中 //居中公式:(总体宽度 - 居中元素的宽度)/2 imgNav.style.left = (imgBox.offsetWidth - imgNav.offsetWidth)/2 + "px"; //设置默认索引为0 var index = 0; //设置默认选择元素颜色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; //遍历数组allA,为所有的A绑定单击响应函数 for(var i=0; i < allA.length; i++){ allA[i].num = i; allA[i].onclick = function(){ index = this.num; imgList.style.left= -516*index +"px"; move(imgList, "left", -516*index, 30, function(){ setA(); }) } } //调用自动切换函数 autoChange(); //设置选中a样式的函数 function setA(){ //判断是否是最后一张图片 **if(index >= imgArr.length - 1){ //是最后一张则跳为第一张 imgList.style.left = 0 +"px"; //索引初始化 index = 0; //判断在网页中查看if是否执行 alert("初始化完毕"); } ** //将所有a初始化 for(var i = 0; i < allA.length; i++){ allA[i].style.backgroundColor = ""; } //将选中的a变色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; } //设置自动切换函数 function autoChange(){ setInterval(function(){ index++; index %= imgArr.length; move(imgList, "left", -516*index, 30,function(){ setA(); }) },3000) } } </script> </head> <body> <div id="imgBox"> <ul id="imgList"> <li><img src="img/01.jpg" ></li> <li><img src="img/02.jpg" ></li> <li><img src="img/03.jpg" ></li> <li><img src="img/04.jpeg" ></li> <li><img src="img/05.jpg" ></li> <li><img src="img/01.jpg" ></li> </ul> <div id="imgNav"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html> ``` 下面是move函数的代码 ``` /* 创建一个移动函数 obj为调用的对象 attribute为修改的属性 target为最终目标 speed为动作的速度 callBack为回调函数 */ function move(obj, attribute, target, speed, callBack){ clearInterval(obj.timer); //获取当前obj属性 var current = parseInt(getStyle(obj , attribute)); //判断速度方向 if(current>target){ speed = -speed; } obj.timer = setInterval(function(){ var oldValue = parseInt(getStyle(obj , attribute)); var newValue = oldValue + speed; //判断函数是否达到目标位置 if(speed > 0 && newValue >= target || speed < 0 && newValue <= target){ //使对象停在目标上 newValue = target; //关闭计时器 clearInterval(obj.timer); callBack && callBack(); } obj.style[attribute] = newValue + "px"; },30) } function getStyle(obj , name){ if(window.getComputedStyle){//判断兼容性 return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; } } ``` ![图片说明](https://img-ask.csdn.net/upload/201906/12/1560270611_753635.png)

javascript的一点困惑

``` html部分 <body> <h1>Web Design</h1> <p>These are the things you should know.</p> <ol id="linklist"> <li> <a href="structure.html">Structure</a> </li> <li> <a href="presentation.html">Presentation</a> </li> <li> <a href="behavior.html">Behavior</a> </li> </ol> </body> js部分 function prepareSlideshow() { var slideshow = document.createElement("div"); slideshow.setAttribute("id","slideshow"); var preview = document.createElement("img"); preview.setAttribute("src","topics.gif"); preview.setAttribute("alt","building blocks of web design"); preview.setAttribute("id","preview"); slideshow.appendChild(preview); var list = document.getElementById("linklist"); insertAfter(slideshow,list);//一个将slideshow放在list的方法 // Get all the links in the list var links = list.getElementsByTagName("a"); // Attach the animation behavior to the mouseover event links[0].onmouseover = function() { moveElement("preview",-100,0,10); } links[1].onmouseover = function() { moveElement("preview",-200,0,10); } links[2].onmouseover = function() { moveElement("preview",-300,0,10); } } addLoadEvent(prepareSlideshow);运行函数的方法 function moveElement(elementID,final_x,final_y,interval) { var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); ``` 这是javascript-dom编程艺术第十章的代码 我有三个地方不明白 第一、为什么不能删去 if (!elem.style.left) { _elem.style.left = "0px";_ } if (!elem.style.top) { _ elem.style.top = "0px";_ }中的 if (!elem.style.left) {} 和 if (!elem.style.top) { },删去后不知为什么图片就不会 平移了。 第二、 为什么删去_if (elem.movement) { clearTimeout(elem.movement);_ _ }_这个代码后图片也不会平移了, 第三、为什么 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 我改成elem.movement = setTimeout moveElement(elementID,final_x,final_y,interval),interval); 后图片平移的时间消失了,没有图片平移的动画了

style跟style.cssText有何区别?

``` var style=ele.style; style={"borderWidth":"3px"}; style.cssText="border-width:3px"; ``` 这两种写法有区别吗

HTML 中style.setAttribute() 兼容性

obj.style.setAttribute(); 在google,firefox下不支持style.setAttribute();请问有什么好的解决方法吗? 代码: function setCellStyle(name,value,isStyleAttribute){ try{ if (isStyleAttribute){ o._currentCell.style.setAttribute(name,value,0); //cssText var o_span = getSpan(o._currentCell); if(o_span){ o_span.style.setAttribute(name,value,0); }else{ //todo } } }catch{ alert(e.message); } }

js如何获取style.width中属性值的数值部分

我有一个图片,想通过document.getElementById('image').style.width的方式获取宽度值,但是直接这么写获取到的是字符串'???px',我不想保留那个'px',求大神帮忙, 上面的问题其实是想完成下面这个效果: 我将这个改变图片大小的函数绑定到一个按钮上,想实现每次点击按钮,都能将图片的高和宽变大一点这个效果 如果大神能有更好的方法,万分感谢

mySelect.options[0].style.display = "none";如何兼容IE?

mySelect.options[0].style.display = "none";如何兼容IE? Chrome,FF下正常,IE(11)下无效。

_self.$c('tbzs_tbzs').style.display中_self.$c( )的解释

_self.$c('tbzs_tbzs').style.display="block";_self.$c('tbzs_tbzs').style.display="block";中_self.$c('tbzs_tbzs')解释_self.$c('tbzs_tbzs').style.display="block";中_self.$c('tbzs_tbzs')解释

关于 style="display:none" 得问题

<div id="theItem" align="center" style="display: none;"> <br /> <br />display:none 可以隐藏 该div. <br /> <br />要显示的时候,用block 或者 inline. <br />document.getElementByID("theItem").style.display = "inline"; // or block <br /> <br />但是block 和inline有什么区别呢? 谁能告诉我. <br /></div>

用js写轮播图,运行结果不对,有假设问题,但是不知道怎么改~求助~

思路是向右移动的时候clone最后一个到第一个位置,重新获取li,设置li[0]marginLeft为负,慢慢向右移动,图片也慢慢改变样式...移动完毕后删除clone的节点,重新绑定节点事件 向左移同理 1.报错没有,问题是调用函数结果不对,大佬把我代码复制运行一波就知道了 (1)问题应该是获取li elements没对,这里我试过 var a=3;var a = 5,结果输出等于5...那我每次前进或者后退都有重新获取li....应该没错啊? 小白表示一脸懵,知道卡在那里但是不知道为什么会卡住 大佬复制运行一下点点就知道了 ``` <!DOCTYPE html> <HTML> <head> <script> height=320; imgHeight=300; width=200; mostLeft=-188; RL=12; size={ /* img 200 300 0 0 img1 170 255 22.500000000000004 15.000000000000002 img2 150 225 37.5 25 img3 120 180 60 40 */ "imgheight1":imgHeight*0.8, "imgheight2":imgHeight*0.7, "imgheight3":imgHeight*0.6, "imgwidth1":width*0.8, "imgwidth2":width*0.7, "imgwidth3":width*0.6, "imgheight1top":imgHeight*(1-0.8)/2, "imgheight2top":imgHeight*(1-0.7)/2, "imgheight3top":imgHeight*(1-0.6)/2, "img1left":width*(1-0.8)/2, "img2left":width*(1-0.7)/2, "img3left":width*(1-0.6)/2 } change={ "imgWidthChange":(size.imgwidth1-size.imgwidth2)/40, "imgHeightChange":(size.imgheight1-size.imgheight2)/40, "imgMTChange":(size.imgheight2top-size.imgheight3top)/40, "imgMLChange":(size.img2left-size.img3left)/40, "opacity":1/40 } function bdEvent(){ var li=document.querySelectorAll("#slider li"); li[0].addEventListener("click", before,true); li[1].addEventListener("click", before,true); li[3].addEventListener("click", next,true); li[4].addEventListener("click", next,true); } function basecss(){ var slider=document.getElementById("slider"); var ul=document.querySelector("#slider ul"); var li=document.querySelectorAll("#slider li"); var img=document.querySelectorAll("#slider img"); var a=document.querySelectorAll("#slider a"); img[0].style.backgroundColor="red"; img[1].style.backgroundColor="green"; img[2].style.backgroundColor="black"; img[3].style.backgroundColor="yellow"; img[4].style.backgroundColor="blue"; document.body.style.margin="0px"; document.body.style.padding="0px"; var left=(screen.width-1024)/2; slider.style.width="1024px"; slider.style.height=height+"px"; slider.style.marginTop="50px"; slider.style.marginLeft=left+"px"; <!-- slider.style.overflow="hidden"; --> ul.style.width="9999px"; ul.style.margin="0px"; ul.style.padding="0px"; li[0].style.marginLeft="12px"; for(var i=0;i<li.length;i++){ li[i].style.listStyle="none"; li[i].style.width=width+"px"; li[i].style.height=height+"px"; li[i].style.cssFloat="left"; a[i].style.display="block"; a[i].style.margin="0px auto"; a[i].style.width="40px"; a[i].style.height="20px"; img[i].style.cssFloat="left"; if(i==0||i==4){ img[i].style.width=size.imgwidth2+"px"; img[i].style.height=size.imgheight2+"px"; img[i].style.marginTop=size.imgheight2top+"px"; img[i].style.marginLeft=size.img2left+"px"; } else if(i==1||i==3){ img[i].style.width=size.imgwidth1+"px"; img[i].style.height=size.imgheight1+"px"; img[i].style.marginTop=size.imgheight1top+"px"; img[i].style.marginLeft=size.img1left+"px"; }else if(i==2){ img[i].style.width=width+"px"; img[i].style.height=imgHeight+"px"; }else{ img[i].style.width=size.imgwidth3+"px"; img[i].style.height=size.imgheight3+"px"; img[i].style.marginTop=size.imgheight3top+"px"; img[i].style.marginLeft=size.img3left+"px"; } } } function next(){ var ul=document.querySelector("#slider ul"); var li=document.querySelectorAll("#slider li"); var img=document.querySelectorAll("img"); //copy最后一个放到最前面然后删除最后一个 var first=li[li.length-1].cloneNode(true); ul.insertBefore(first,li[0]); //改过后重新 获取li var li=document.querySelectorAll("#slider li"); var img=document.querySelectorAll("#slider img"); var mostLeft=-188; li[0].style.marginLeft=mostLeft+"px"; li[1].style.marginLeft="0px"; var pyl=5,imgWidthChange=0,imgHeightChange=0,imgMTChange=0,imgMLChange=0,opacity=1/40; /* img 200 300 0 0 img1 160 240 20 30 img2 140 210 30 45 img3 120 180 40 60 */ function add(){ if(parseInt(li[0].style.marginLeft)<12){ li[0].style.marginLeft=mostLeft+pyl+"px"; pyl+=5; imgWidthChange+=change.imgWidthChange; imgHeightChange+=change.imgHeightChange; imgMTChange+=change.imgMTChange; imgMLChange+=change.imgMLChange; opacity+=change.opacity; for(var i=0;i<6;i++){ switch(i){ case 0: li[i].style.opacity=opacity; img[i].style.width=size.imgwidth3+imgWidthChange+"px"; img[i].style.height=size.imgheight3+imgHeightChange+"px"; img[i].style.marginTop=size.imgheight3top+imgMTChange+"px"; img[i].style.marginLeft=size.img3left+imgMLChange+"px"; break case 1: img[i].style.width=size.imgwidth2+imgWidthChange+"px"; img[i].style.height=size.imgheight2+imgHeightChange+"px"; img[i].style.marginTop=size.imgheight2top+imgMTChange+"px"; img[i].style.marginLeft=size.img2left+imgMLChange+"px"; break case 2: img[i].style.width=size.imgwidth1+imgWidthChange*2+"px"; img[i].style.height=size.imgheight1+imgHeightChange*2+"px"; img[i].style.marginTop=size.imgheight1top+imgMTChange*2+"px"; img[i].style.marginLeft=size.img1left+imgMLChange*2+"px"; break case 3: img[i].style.width=width-imgWidthChange*2+"px"; img[i].style.height=imgHeight-imgHeightChange*2+"px"; img[i].style.marginTop=-imgMTChange*2+"px"; img[i].style.marginLeft=-imgMLChange*2+"px"; break case 4: img[i].style.width=size.imgwidth1-imgWidthChange+"px"; img[i].style.height=size.imgheight1-imgHeightChange+"px"; img[i].style.marginTop=size.imgheight1top-imgMTChange+"px"; img[i].style.marginLeft=size.img1left-imgMLChange+"px"; break case 5: img[i].style.width=size.imgwidth3-imgWidthChange+"px"; img[i].style.height=size.imgheight3-imgHeightChange+"px"; img[i].style.marginTop=size.imgheight2top+imgMTChange+"px"; img[i].style.marginLeft=size.img2left+imgMLChange+"px"; li[i].style.opacity=opacity; break } } var go=setTimeout(function(){add();},1000/60); } else{ ul.removeChild(li[li.length-1]); clearTimeout(go); bdEvent(); } } var go=setTimeout(function(){add();},1000/60); } function before(){ var ul=document.querySelector("#slider ul"); var li=document.querySelectorAll("#slider li"); var img=document.querySelectorAll("img"); //copy最后一个放到最前面然后删除最后一个 var last=li[0].cloneNode(true); ul.appendChild(last); console.log("6"); //重新获取li var li=document.querySelectorAll("#slider li"); var img=document.querySelectorAll("img"); var pyl=0,imgWidthChange=0,imgHeightChange=0,imgMTChange=0,imgMLChange=0,opacity=1/40; <!-- console.log(change.imgMTChange); --> /* 3 2 1 0 1 2 3 img 200 300 0 0 img1 160 240 20 30 img2 140 210 30 45 img3 120 180 40 60 */ function add(){ //重新获取后最左边 if(parseInt(li[0].style.marginLeft)>mostLeft){ li[0].style.marginLeft=RL+pyl+"px"; pyl=pyl-5; imgWidthChange+=change.imgWidthChange; imgHeightChange+=change.imgHeightChange; imgMTChange+=change.imgMTChange; imgMLChange+=change.imgMLChange; opacity+=change.opacity; for(var i=0;i<6;i++){ switch(i){ case 0: img[i].style.width=size.imgwidth2-imgWidthChange+"px"; img[i].style.height=size.imgheight2-imgHeightChange+"px"; img[i].style.marginTop=size.imgheight2top+imgMTChange+"px"; img[i].style.marginLeft=size.img2left+imgMLChange+"px"; li[i].style.opacity=1-opacity; break; case 1: img[i].style.width=size.imgwidth1-imgWidthChange+"px"; img[i].style.height=size.imgheight1-imgHeightChange+"px"; img[i].style.marginTop=size.imgheight1top-imgMTChange+"px"; img[i].style.marginLeft=size.img1left-imgMLChange+"px"; break; case 2: img[i].style.width=width-imgWidthChange*2+"px"; img[i].style.height=imgHeight-imgHeightChange*2+"px"; img[i].style.marginTop=-imgMTChange*2+"px"; img[i].style.marginLeft=-imgMLChange*2+"px"; break; case 3: img[i].style.width=size.imgwidth1+imgWidthChange*2+"px"; img[i].style.height=size.imgheight1+imgHeightChange*2+"px"; img[i].style.marginTop=size.imgheight1top+imgMTChange*2+"px"; img[i].style.marginLeft=size.img1left+imgMLChange*2+"px"; break; case 4: img[i].style.width=size.imgwidth2+imgWidthChange+"px"; img[i].style.height=size.imgheight2+imgHeightChange+"px"; img[i].style.marginTop=size.imgheight2top+imgMTChange+"px"; img[i].style.marginLeft=size.img2left+imgMLChange+"px"; break; case 5: li[i].style.opacity=opacity; img[i].style.width=size.imgwidth3+imgWidthChange+"px"; img[i].style.height=size.imgheight3+imgHeightChange+"px"; img[i].style.marginTop=size.imgheight3top+imgMTChange+"px"; img[i].style.marginLeft=size.img3left+imgMLChange+"px"; break; } } } else{ clearInterval(back); ul.removeChild(li[0]); bdEvent(); } } var back=setInterval(add,1000/60) } window.onload = function(){ basecss(); bdEvent(); } </script> </head> <body> <div id="slider"> <ul> <li> <img > <a>0000</a> </li> <li> <img > <a>0000</a> </li> <li> <img > <a>0000</a> </li> <li> <img > <a>0000</a> </li> <li> <img > <a>0000</a> </li> </ul> </div> </body> </HTML> ```

菜鸟求js大神帮忙!!为什么我这段js代码只有第一个元素绑定了事件

<script> window.onload=function(){ var oParent=document.getElementById("aa"); var boxs=oParent.getElementsByClassName("box"); for(var i=0;i<boxs.length;i++){ var imgs=boxs[i].getElementsByClassName("img"); for(var p=0;p<imgs.length;p++){ imgs[p].onmouseover=function(){ show(); } imgs[p].onmouseout=function(){ unshow(); } } } } function show(){ var txts=document.getElementsByClassName("txt"); for(var j=0;j<txts.length;j++){ if(j==0){ txt[j].style.width=202+"px"; txt[j].style.height=202+"px"; txt[j].style.display="block"; txt[j].style.left=260+"px"; }else{ if(j%2!=0){ if(j<3){ txt[j].width=102+"px"; txt[j].height=102+"px"; txt[j].style.display="block"; txt[j].style.left=360+"px"; }else{ txt[j].width=102+"px"; txt[j].height=102+"px"; txt[j].style.display="block"; txt[j].style.left=360+"px"; txt[j].style.top=100+"px"; } }else{ if(j<4){ txt[j].width=102+"px"; txt[j].height=102+"px"; txt[j].style.display="block"; txt[j].style.left=460+"px"; }else{//4 txt[j].width=102+"px"; txt[j].height=102+"px"; txt[j].style.display="block"; txt[j].style.left=460+"px"; txt[j].style.top=100+"px"; } } } } } function unshow(){ var txts=document.getElementsByClassName("txt"); for(var j=0;j<txts.length;j++){ txts[j].style.display="none"; } } </script>

为什么将css样式放在css文件和直接在标签中使用style属性所表现的不同?

## 第一种直接在div标签上标明style ``` <div class="changeX">a元素</div> <div class="changeY" style="display: none;">b元素</div> <input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" /> <button onclick="gr('.changeY','.changeX');">切换显示b元素</button> <script type="text/javascript"> function gr(s1, s2) { document.querySelector(s1).style.display = ""; document.querySelector(s2).style.display = "none"; } </script> ``` 可以实现点击按钮使各内容表示 ## 第二种将代码分离 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>测试代码</title> <style type="text/css"> .changeY{ display: none; } </style> </head> <body> <div class="changeX">a元素</div> <div class="changeY">b元素</div> <input type="button" value="切换显示a元素" onclick="gr('.changeX','.changeY');" /> <button onclick="gr('.changeY','.changeX');">切换显示b元素</button> <script type="text/javascript"> function gr(s1, s2) { document.querySelector(s1).style.display = ""; document.querySelector(s2).style.display = "none"; } </script> </body> </html> ``` 只能实现点击第二个按钮将盒子内容隐藏而不能显示盒子内容

jquery绝对定位元素用offset设置偏移,显示位置不对

在做搜索框,根据输入内容去后台匹配数据显示到输入框下的div里, 一个没定位的input,一个绝对定位的div,获取input的offset直接赋值给div, 结果div在input下面,两个元素的内外边距都用内联方式设置为0了 (这个页面是嵌在父页面dialog的iframe里的, 看起来就好像div的top多加了dialog标题栏的高而input没有, 因为我用top减了标题栏的高之后两个元素基本重叠了,而且单独打开这个页面位置也对。。可是offset不是相对文档的偏移吗) html: ``` <input id="input" onfocus="startMatch()" onblur="stopMatch()" class="text" value="请输入" style="margin:0;padding:0;"/> <div id="searchDiv" style="border:1px solid #52a6e3;position:absolute;display:none;margin:0;padding:0;"> <ul id="dataUl" style="list-style:none;"> </ul> </div> ``` js: ``` function setPosition(){ var left = $("#input").offset().left; var top = $("#input").offset().top; var divOffset = {left:left,top:top}; var width = $("#input").width(); $("#searchDiv").offset(divOffset); } ```

有什么会使js设置style失败吗

document.getElementById("xxx").style.marginTop=xxx web上,左侧树,只有在最下面的时候触发点击事件,这句js会出错,但是,上面的点击事件能完成,上面的经过滚动滚到最下面的那块位置,点击事件也会变得出错,请问有什么会阻止这个吗,因为树挺长的,有滚动条,试过了,就是最下面的一小块的点击事件这个style完不成,js能运行到这句话。出错的去查看元素,上面的style只有style字样,后面的=“xxx”没有。。为啥会这样。。

js appendchild 第一次追加后,父元素不显示被追加的元素

document.createElement("div"); 生成新的div元素,使用appendchild追加在其父元素下,为什么第一次appendchild的div不显示,而再次appendchild之后,第一次追加的div和后一次追加的div会一起显示出来,代码如下:请帮忙解答下,谢谢! div_left_child=document.createElement("div"); div_left_child.style.cssText="height:100%;width:auto;float:left;"; div_left_child.id=ID; div_left_child.innerHTML=title; div_leftTab.appendchild(div_left_child); div_leftTab.style.width="parseInt(div_left_child.style.paddingLeft)+parseInt(div_left_child.style.paddingRight)+parseInt(div_left_child.clientWidth)";

obj.style is undefined的问题

![图片说明](https://img-ask.csdn.net/upload/201608/12/1471002132_365471.png)

cancelBubble 和 returnValue 在这有什么意义啊..- -

我不明白 event.cancelBubble在这里有什么用. - -..我注释掉. 依然可以拖动层啊.- - 代码如下.0 0.. [code="java"] <html> <head> <title>可拖拽的元素</title> <script language="javascript"> function begin(drag,event) { var x=parseInt(drag.style.left); var y=parseInt(drag.style.top); var delx=event.clientX-parseInt(drag.style.left); var dely=event.clientY-parseInt(drag.style.top); document.attachEvent("onmousemove",moveHandle); document.attachEvent("onmouseup",upHandle); //就是这俩句 event.cancelBubble=true; event.returnValue=false; /* 捕捉mousemove事件的~处理程序~ */ function moveHandle(e) { e=window.event; drag.style.left=(event.clientX-delx)+"px"; drag.style.top=(event.clientY-dely)+"px"; // 还有这 event.cancelBubble=true; } /* 捕捉松开按钮时发生的mouseup事件 */ function upHandle(e) { //注销事件 document.detachEvent("onmouseup",upHandle); document.detachEvent("onmousemove",moveHandle); } //这...- - event.cancelBubble=true; } </script> </head> <body> <div style="left:0px;top:0px; position:absolute" onmousedown="begin(this,event)">你可以拖我...但是不要抛弃我.0 0..</div> </body> </html> [/code] 源地址在这:http://pjj.iteye.com/admin/blogs/325660 [b]问题补充:[/b] :cry: 谢谢redish大哥..我看了.. delino大哥..说的清楚点好么..我刚学.不太懂..- -

请问为什么“会员中心”和“去购物车结算”没有跟“搜索”对齐呢?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>传智商城下拉菜单</title> <style type="text/css"> body,ul,input,p,dl,dt,dd,h1{ margin:0; padding:0;} body{ min-width:755px; color:#6c6c6c; font-size:12px;} ul{ list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .left{ float:left;} .right{ float:right;} #top{ height:30px; line-height:30px; background:#f7f7f7; border-bottom:1px solid #eee; } #top ul{ margin:0 20px; } #top li{ float:left; padding:0 5px 0 0;} #top .line{ color:#ccc;} #top .top_nav{ max-width:1220px; margin:0 auto;} .right li{ cursor:pointer;} .right li span{ padding:0 9px;} #header{ width:1220px; margin:0 auto; padding-top:20px; overflow:hidden; } #header a{ width:240px; display:block; } #header #search{ width:500px; margin-top:15px; } #header #search input{ width:416px; height:30px; border:3px solid #e4393c; } #header #search .search_btn{ width:78px; height:36px; background:#e4393c; font-size:14px; font-weight:700; color:#fff; cursor:pointer; } #header #search p{ color:#999; font-size:12px; margin-top:5px; } #hear #info{ margin-top:18px; margin-left:20px; } #header #info input{ height:32px; border:1px solid #e3e3e3; background-color:#f7f7f7; color:#666; padding:0 10px; margin-right:12px; } .right .u100{ position:relative;} .right #u101{ width:95px; display:none; position:absolute; left:0; top:30px; background-color:#fff; border:thin; border-color:#eee; } .right #u101 a{ display:block; padding:0 10px; line-height:28px; color:#6c6c6c; } .right #u101 a:hover{ background:#f5f5f5;} </style> <script type="text/javascript"> function change(myId,mode){ document.getElementById(myId).style.display=mode; if(mode=='block'){ //设置下拉菜单所在div的边框 document.getElementById(myId).style.border="1px solid #eee"; document.getElementById(myId).style.borderTop="none"; //设置鼠标划过的li的边框及背景颜色 document.getElementById(myId).parentNode.style.backgroundColor="fff"; document.getElementById(myId).parentNode.style.border="1px solid #eee"; document.getElementById(myId).parentNode.style.borderBottom="none"; } else{ //当不显示下拉列表时,鼠标划过的li的边框及背景颜色 document.getElementById(myId).parentNode.style.backgroundColor=""; document.getElementById(myId).parentNode.style.border=""; } } </script> </head> <body> <!-- 传智商城菜单栏 --> <div id="top"> <ul class="top_nav"> <li>亲,请登录</li> <li>免费注册</li> </ul> <ul class="right"> <li> <li class="u100" onmouseover="change('u101','block')" onmouseout="change('u101','none')"> <span>我的商城</span> <div id="u101"> <a>已买到的宝贝</a> <a>我的足迹</a> <a>我的上新</a> <a>啦啦啦</a> <a>噢噢噢噢</a> <a>哈哈</a> </div> </li> </li> <li class="line">|</li> <li><span>购物车</span></li> <li class="line">|</li> <li><span>收藏夹</span></li> <li class="line">|</li> <li><span>卖家中心</span></li> <li class="line">|</li> <li><span>联系客服</span></li> </ul> </div> <!--传智商城主体-->![图片说明](https://img-ask.csdn.net/upload/202002/13/1581607145_511523.png) <div id="header"> <a class="left"><img src="../images/5_ (1).gif" /></a> <div id="search" class="left"> <input type="text" class="left" /> <input class="search_btn" type="button" value="搜索" /> <p>热门搜索:网页培训 大学教材 智能手机 平板电脑</p> </div> <div id="info" class="left"> <input type="button" value="会员中心" /> <input type="button" value="去购物车结算" /> </div> </div> </body> </html> ``` ```

为什么用document.body会出bug呢

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ height: 100px; width: 100px; background-color: red; position: absolute; } </style> </head> <body> <div id="div1"></div> <script> var div1=document.getElementById("div1"); div1.addEventListener("mousedown",getDiv,false) div1.addEventListener("mouseup",delDiv,false) // document.body.addEventListener("mousemove",move,false); function getDiv(){ var oevent=window.event||arguments[0]; div1.style.cursor="move"; document.addEventListener("mousemove",move,false); // div1.style.left=oevent.clientX; // div1.style.top=oevent.clientY; } function move(){ var oevent=window.event||arguments[0]; div1.style.left=oevent.clientX-50+"px"; div1.style.top=oevent.clientY-50+"px"; } function delDiv(){ div1.style.cursor="auto"; var oevent=window.event||arguments[0]; div1.style.left=oevent.clientX-50+"px"; div1.style.top=oevent.clientY-50+"px"; document.removeEventListener("mousemove",move,false); } </script> </body> </html> 这段代码中为什么用document.body.addEventListener("mousemove",move,false);添加事件在鼠标快速移动时会出现bug

本人小白,请问最后一行那里用className为什么不起作用,一定要用style.display吗

!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> <style> .back{ background-color: yellowgreen; } .b{ display: block; } .box{ width: 300px; margin: 100px auto; border: 1px solid yellow; } #bottom div{ height: 270px; background-color: blue; border: 1px solid; display: none; } </style> <body> <div class="box"> <div class="top"> <button>第一个</button> <button>第二个</button> <button>第三个</button> <button>第四个</button> <button>第五个</button> </div> <div id="bottom"> <div style="display: block">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </div> <script> var btns=document.getElementsByTagName("button"); var divs=document.getElementById("bottom").getElementsByTagName("div"); for(var i=0;i<btns.length;i++) { btns[i].index=i; btns[i].onclick=function () { for(j=0;j<btns.length;j++){ btns[j].className=""; } this.className="back"; for(var i=0;i<btns.length;i++){ divs[i].style.display="none"; } divs[this.index].className="b"; } } </script> </body> </html> ``` ```

js动态生成的div在ie9下显示正常而在ie8下显示错位

html代码如下: <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="width:100%; height:800px; background-color:#9CF" > <div style="width:500px ; height:300px; top:200px; left:200px; position: relative;"> <input type="button" value="ok" onclick="logIn()" /> </div> </body> js代码如下: function logIn(){ var new_page=document.createElement("div");//创建遮蔽层div new_page.style.position="absolute"; new_page.style.top=0; new_page.style.left=0; new_page.style.width=document.body.scrollWidth+"px"; new_page.style.height=document.body.scrollHeight+"px"; new_page.style.backgroundColor="#efefef"; new_page.style.filter="alpha(opacity=70)"; new_page.id="shielddiv";//遮蔽层div var logInDiv=document.createElement("div");//创建登录层div logInDiv.style.border="1px solid #999999"; logInDiv.style.width="400px"; logInDiv.style.height="250px"; logInDiv.style.position="absolute"; var divClientWidth=(document.body.clientWidth-400)/2+document.body.scrollLeft; var divClientHeight=(document.body.clientHeight-250)/2+document.body.scrollTop; logInDiv.style.left=divClientWidth+"px"; logInDiv.style.top=divClientHeight+"px"; logInDiv.style.backgroundColor="#ffffff"; logInDiv.id="logInpagediv";//登录层div var logInDivTitle=document.createElement("div");//登录层div标题栏 logInDivTitle.style.width="400px"; logInDivTitle.style.height="36px"; logInDivTitle.style.backgroundColor="#dbdbdb"; logInDivTitle.style.id="titlediv" var hh=document.createElement('h2');//登录层div标题栏下左部 hh.style.marginTop="2px"; hh.style.marginLeft="15px"; hh.style.cssFloat="left"; hh.textContent="登录"; hh.style.fontWeight="normal"; hh.style.fontSize="18px"; var inputDiv1=document.createElement('div');//登录层div帐号输入 inputDiv1.style.position="absolute"; inputDiv1.style.top="85px"; inputDiv1.style.left="44px"; inputDiv1.style.width="300px"; inputDiv1.style.height="32px"; inputDiv1.style.lineHeight="32px"; inputDiv1.style.color="#000000"; inputDiv1.style.fontSize="16px"; var span2=document.createElement('span');//登录层div帐号输入 span2.style.cssFloat="left"; span2.textContent="帐号"; var input1=document.createElement('input');//创建input框 input1.style.width="250px"; input1.style.height="32px"; input1.style.border="1px solid #999999"; input1.style.cssFloat="right"; input1.id="accountsInput"; input1.tabIndex="1"; var inputDiv2=document.createElement('div');//登录层div密码输入 inputDiv2.style.position="absolute"; inputDiv2.style.top="130px"; inputDiv2.style.left="44px"; inputDiv2.style.width="300px"; inputDiv2.style.height="32px"; inputDiv2.style.lineHeight="32px"; inputDiv2.style.color="#000000"; inputDiv2.style.fontSize="16px"; var span3=document.createElement('span');//登录层div密码输入 span3.style.cssFloat="left"; span3.textContent="密码"; var input2=document.createElement('input');//创建密码input框 input2.setAttribute("type","password"); input2.style.width="250px"; input2.style.height="32px"; input2.style.border="1px solid #999999"; input2.style.cssFloat="right"; input2.id="passwordInput"; input2.tabIndex="2"; var buttonDiv=document.createElement('div'); //登录层div下button div buttonDiv.style.position="absolute"; buttonDiv.style.top="190px"; buttonDiv.style.left="80px"; buttonDiv.style.width="260px"; buttonDiv.style.height="32px"; buttonDiv.style.display="inline"; var confirmBut=document.createElement('input');//登录层div下确定键 confirmBut.type="button"; confirmBut.style.width="100px"; confirmBut.style.height="32px"; confirmBut.style.lineHeight="32px"; confirmBut.style.color="#000000"; confirmBut.style.fontSize="16px"; confirmBut.style.backgroundColor="#efefef"; confirmBut.value="confirm"; confirmBut.style.cssFloat="left"; confirmBut.id="confirButid"; confirmBut.tabIndex="3"; var cancleBut=document.createElement('input');//登录层div取消键 cancleBut.type="button"; cancleBut.style.width="100px"; cancleBut.style.height="32px"; cancleBut.style.lineHeight="32px"; cancleBut.style.color="#000000"; cancleBut.style.fontSize="16px"; cancleBut.style.backgroundColor="#efefef"; cancleBut.value="cancle"; cancleBut.style.cssFloat="right"; cancleBut.tabIndex="4"; buttonDiv.appendChild(cancleBut); //生成取消键 buttonDiv.appendChild(confirmBut); //生成确定键 logInDiv.appendChild(buttonDiv); //生成确定键div inputDiv2.appendChild(span3); //生成密码输入 inputDiv2.appendChild(input2); logInDiv.appendChild(inputDiv2); inputDiv1.appendChild(span2); //生成帐号输入 inputDiv1.appendChild(input1); logInDiv.appendChild(inputDiv1); //生成帐号输入div logInDivTitle.appendChild(hh); logInDiv.appendChild(logInDivTitle); //生成标题栏 new_page.appendChild(logInDiv); //生成登录div document.body.appendChild(new_page); //生成遮蔽层div } 在ie9显示正常,而在ie8及其以下版本显示均有错位或不显示。请问该如何解决,谢谢!

linux下利用/proc进行进程树的打印

在linux下利用c语言实现的进程树的打印,主要通过/proc下的目录中的进程文件,获取status中的进程信息内容,然后利用递归实现进程树的打印

设计模式(JAVA语言实现)--20种设计模式附带源码

课程亮点: 课程培训详细的笔记以及实例代码,让学员开始掌握设计模式知识点 课程内容: 工厂模式、桥接模式、组合模式、装饰器模式、外观模式、享元模式、原型模型、代理模式、单例模式、适配器模式 策略模式、模板方法模式、观察者模式、迭代器模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式 课程特色: 笔记设计模式,用笔记串连所有知识点,让学员从一点一滴积累,学习过程无压力 笔记标题采用关键字标识法,帮助学员更加容易记住知识点 笔记以超链接形式让知识点关联起来,形式知识体系 采用先概念后实例再应用方式,知识点深入浅出 提供授课内容笔记作为课后复习以及工作备查工具 部分图表(电脑PC端查看):

Python数据分析与挖掘

92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元 &nbsp; 为什么学习数据分析? &nbsp; &nbsp; &nbsp; 人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。 &nbsp; &nbsp; &nbsp; 从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。 &nbsp;&nbsp; 本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。 &nbsp; 二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。 &nbsp; 三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。 &nbsp; 四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。 &nbsp; 五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。

广工操作系统课程设计(文档+代码+可执行文件)

实现作业调度(先来先服务)、进程调度功能(时间片轮转) 实现内存管理功能(连续分配)。 实现文件系统功能(选作) 这些功能要有机地连接起来

Only老K说-爬取妹子图片(简单入门)

安装第三方请求库 requests 被网站禁止了访问 原因是我们是Python过来的 重新给一段 可能还是存在用不了,使用网页的 编写代码 上面注意看匹配内容 User-Agent:请求对象 AppleWebKit:请求内核 Chrome浏览器 //请求网页 import requests import re //正则表达式 就是去不规则的网页里面提取有规律的信息 headers = { 'User-Agent':'存放浏览器里面的' } response = requests.get

linux“开发工具三剑客”速成攻略

工欲善其事,必先利其器。Vim+Git+Makefile是Linux环境下嵌入式开发常用的工具。本专题主要面向初次接触Linux的新手,熟练掌握工作中常用的工具,在以后的学习和工作中提高效率。

Python代码实现飞机大战

文章目录经典飞机大战一.游戏设定二.我方飞机三.敌方飞机四.发射子弹五.发放补给包六.主模块 经典飞机大战 源代码以及素材资料(图片,音频)可从下面的github中下载: 飞机大战源代码以及素材资料github项目地址链接 ————————————————————————————————————————————————————————— 不知道大家有没有打过飞机,喜不喜欢打飞机。当我第一次接触这个东西的时候,我的内心是被震撼到的。第一次接触打飞机的时候作者本人是身心愉悦的,因为周边的朋友都在打飞机, 每

Python数据清洗实战入门

本次课程主要以真实的电商数据为基础,通过Python详细的介绍了数据分析中的数据清洗阶段各种技巧和方法。

2019 Python开发者日-培训

本次活动将秉承“只讲技术,拒绝空谈”的理念,邀请十余位身处一线的Python技术专家,重点围绕Web开发、自动化运维、数据分析、人工智能等技术模块,分享真实生产环境中使用Python应对IT挑战的真知灼见。此外,针对不同层次的开发者,大会还安排了深度培训实操环节,为开发者们带来更多深度实战的机会。

apache-jmeter-5.1.1(Requires Java 8+).zip

。Apache JMeter 5.1.1 (Requires Java 8+),需要jdk8以上的版本。

数通HCNP中文理论全套教材.rar

内涵HCNP-IENP中文理论书-内文,

Python可以这样学(第四季:数据分析与科学计算可视化)

董付国老师系列教材《Python程序设计(第2版)》(ISBN:9787302436515)、《Python可以这样学》(ISBN:9787302456469)配套视频,在教材基础上又增加了大量内容,通过实例讲解numpy、scipy、pandas、statistics、matplotlib等标准库和扩展库用法。

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

我以为我对Mysql事务很熟,直到我遇到了阿里面试官

太惨了,面试又被吊打

2019 AI开发者大会

2019 AI开发者大会(AI ProCon 2019)是由中国IT社区CSDN主办的AI技术与产业年度盛会。多年经验淬炼,如今蓄势待发:2019年9月6-7日,大会将有近百位中美顶尖AI专家、知名企业代表以及千余名AI开发者齐聚北京,进行技术解读和产业论证。我们不空谈口号,只谈技术,诚挚邀请AI业内人士一起共铸人工智能新篇章!

图书管理系统(Java + Mysql)我的第一个完全自己做的实训项目

图书管理系统 Java + MySQL 完整实训代码,MVC三层架构组织,包含所有用到的图片资源以及数据库文件,大三上学期实训,注释很详细,按照阿里巴巴Java编程规范编写

Python数据挖掘简易入门

&nbsp; &nbsp; &nbsp; &nbsp; 本课程为Python数据挖掘方向的入门课程,课程主要以真实数据为基础,详细介绍数据挖掘入门的流程和使用Python实现pandas与numpy在数据挖掘方向的运用,并深入学习如何运用scikit-learn调用常用的数据挖掘算法解决数据挖掘问题,为进一步深入学习数据挖掘打下扎实的基础。

C/C++学习指南全套教程

C/C++学习的全套教程,从基本语法,基本原理,到界面开发、网络开发、Linux开发、安全算法,应用尽用。由毕业于清华大学的业内人士执课,为C/C++编程爱好者的教程。

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

三个项目玩转深度学习(附1G源码)

从事大数据与人工智能开发与实践约十年,钱老师亲自见证了大数据行业的发展与人工智能的从冷到热。事实证明,计算机技术的发展,算力突破,海量数据,机器人技术等,开启了第四次工业革命的序章。深度学习图像分类一直是人工智能的经典任务,是智慧零售、安防、无人驾驶等机器视觉应用领域的核心技术之一,掌握图像分类技术是机器视觉学习的重中之重。针对现有线上学习的特点与实际需求,我们开发了人工智能案例实战系列课程。打造:以项目案例实践为驱动的课程学习方式,覆盖了智能零售,智慧交通等常见领域,通过基础学习、项目案例实践、社群答疑,三维立体的方式,打造最好的学习效果。

2021考研数学张宇基础30讲.pdf

张宇:博士,全国著名考研数学辅导专家,教育部“国家精品课程建设骨干教师”,全国畅销书《张宇高等数学18讲》《张宇线性代数9讲》《张宇概率论与数理统计9讲》《张宇考研数学题源探析经典1000题》《张宇考

专为程序员设计的数学课

<p> 限时福利限时福利,<span>15000+程序员的选择!</span> </p> <p> 购课后添加学习助手(微信号:csdn590),按提示消息领取编程大礼包!并获取讲师答疑服务! </p> <p> <br> </p> <p> 套餐中一共包含5门程序员必学的数学课程(共47讲) </p> <p> 课程1:《零基础入门微积分》 </p> <p> 课程2:《数理统计与概率论》 </p> <p> 课程3:《代码学习线性代数》 </p> <p> 课程4:《数据处理的最优化》 </p> <p> 课程5:《马尔可夫随机过程》 </p> <p> <br> </p> <p> 哪些人适合学习这门课程? </p> <p> 1)大学生,平时只学习了数学理论,并未接触如何应用数学解决编程问题; </p> <p> 2)对算法、数据结构掌握程度薄弱的人,数学可以让你更好的理解算法、数据结构原理及应用; </p> <p> 3)看不懂大牛代码设计思想的人,因为所有的程序设计底层逻辑都是数学; </p> <p> 4)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; </p> <p> 5)想修炼更好的编程内功,在遇到问题时可以灵活的应用数学思维解决问题。 </p> <p> <br> </p> <p> 在这门「专为程序员设计的数学课」系列课中,我们保证你能收获到这些:<br> <br> <span> </span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">①价值300元编程课程大礼包</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">②应用数学优化代码的实操方法</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">③数学理论在编程实战中的应用</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">④程序员必学的5大数学知识</span> </p> <p class="ql-long-24357476"> <span class="ql-author-24357476">⑤人工智能领域必修数学课</span> </p> <p> <br> 备注:此课程只讲程序员所需要的数学,即使你数学基础薄弱,也能听懂,只需要初中的数学知识就足矣。<br> <br> 如何听课? </p> <p> 1、登录CSDN学院 APP 在我的课程中进行学习; </p> <p> 2、登录CSDN学院官网。 </p> <p> <br> </p> <p> 购课后如何领取免费赠送的编程大礼包和加入答疑群? </p> <p> 购课后,添加助教微信:<span> csdn590</span>,按提示领取编程大礼包,或观看付费视频的第一节内容扫码进群答疑交流! </p> <p> <img src="https://img-bss.csdn.net/201912251155398753.jpg" alt=""> </p>

DDR5_Draft_Spec_Rev05c.pdf

DDR5 spec

Java面试史上最全的JAVA专业术语面试100问 (前1-50)

前言: 说在前面, 面试题是根据一些朋友去面试提供的,再就是从网上整理了一些。 先更新50道,下一波吧后面的也更出来。 求赞求关注!! 废话也不多说,现在就来看看有哪些面试题 1、面向对象的特点有哪些? 抽象、继承、封装、多态。 2、接口和抽象类有什么联系和区别? 3、重载和重写有什么区别? 4、java有哪些基本数据类型? 5、数组有没有length()方法?String有没有length()方法? 数组没有length()方法,它有length属性。 String有length()方法。 集合求长度用

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

本课程适合CCNA或HCNA网络小白同志,高手请绕道,可以直接学习进价课程。通过本预科课程的学习,为学习网络工程师、思科CCNA、华为HCNA这些认证打下坚实的基础! 重要!思科认证2020年2月24日起,已启用新版认证和考试,包括题库都会更新,由于疫情原因,请关注官网和本地考点信息。题库网络上很容易下载到。

C/C++跨平台研发从基础到高阶实战系列套餐

一 专题从基础的C语言核心到c++ 和stl完成基础强化; 二 再到数据结构,设计模式完成专业计算机技能强化; 三 通过跨平台网络编程,linux编程,qt界面编程,mfc编程,windows编程,c++与lua联合编程来完成应用强化 四 最后通过基于ffmpeg的音视频播放器,直播推流,屏幕录像,

Python界面版学生管理系统

前不久上传了一个控制台版本的学生管理系统,这个是Python界面版学生管理系统,这个是使用pycharm开发的一个有界面的学生管理系统,基本的增删改查,里面又演示视频和完整代码,有需要的伙伴可以自行下

2019数学建模A题高压油管的压力控制 省一论文即代码

2019数学建模A题高压油管的压力控制省一完整论文即详细C++和Matlab代码,希望对同学们有所帮助

4小时玩转微信小程序——基础入门与微信支付实战

这是一个门针对零基础学员学习微信小程序开发的视频教学课程。课程采用腾讯官方文档作为教程的唯一技术资料来源。杜绝网络上质量良莠不齐的资料给学员学习带来的障碍。 视频课程按照开发工具的下载、安装、使用、程序结构、视图层、逻辑层、微信小程序等几个部分组织课程,详细讲解整个小程序的开发过程

相关热词 c#框体中的退出函数 c# 按钮透明背景 c# idl 混编出错 c#在位置0处没有任何行 c# 循环给数组插入数据 c# 多线程死锁的例子 c# 钉钉读取员工排班 c# label 不显示 c#裁剪影像 c#工作进程更新ui
立即提问