最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Can't get width property with JavaScript - Stack Overflow

programmeradmin0浏览0评论

My idea is when I click on the button, the div#x will lose 1% of width. Here is my code:

document.querySelector('#a').onclick = function() {
    var
        lost = document.querySelector('#x').style.width,
        lost = lost.slice(0, -1);
    lost = Number(lost);
    lost -= 1;
    document.querySelector('#x').style.width = lost + '%';
}
nav#control {
    display: flex;
    flex-basis: 50px;
    align-items: center;
    justify-content: center;
    background: #FFF;
    padding: 5px;
    width: 100%
}

.knob {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    cursor: pointer
}

#b {
    position: relative;
    flex-grow: 1;
    background: #EFEFEF;
    margin: 0 10px;
    height: 30px
}
#x {
    position: absolute;
    background: #4C8EFA;
    width: 100%; height: 30px;
    border-radius: 1px;
    z-index: 2
}
#c {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}
<nav id='control'>
    <section id='a' class='knob'><img src='x.png'/></section>
    <section id='b'>
        <div id='x'></div>
        <div id='c'>background</div>
    </section>
    <section id='d' class='knob'><img src='x.png'/></section>
</nav>

My idea is when I click on the button, the div#x will lose 1% of width. Here is my code:

document.querySelector('#a').onclick = function() {
    var
        lost = document.querySelector('#x').style.width,
        lost = lost.slice(0, -1);
    lost = Number(lost);
    lost -= 1;
    document.querySelector('#x').style.width = lost + '%';
}
nav#control {
    display: flex;
    flex-basis: 50px;
    align-items: center;
    justify-content: center;
    background: #FFF;
    padding: 5px;
    width: 100%
}

.knob {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    cursor: pointer
}

#b {
    position: relative;
    flex-grow: 1;
    background: #EFEFEF;
    margin: 0 10px;
    height: 30px
}
#x {
    position: absolute;
    background: #4C8EFA;
    width: 100%; height: 30px;
    border-radius: 1px;
    z-index: 2
}
#c {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}
<nav id='control'>
    <section id='a' class='knob'><img src='x.png'/></section>
    <section id='b'>
        <div id='x'></div>
        <div id='c'>background</div>
    </section>
    <section id='d' class='knob'><img src='x.png'/></section>
</nav>

The blue bar (div#x) is supposed to be shorter 1% every time I click on the left button (section#a). I have check so many times but I still don't know what problem with my code. I did change some code and I think that problem is in this line lost = document.querySelector('#x').style.width because it seems like it doesn't return any value which is supposed to gimme 100% width of div#x

Share Improve this question edited Jun 5, 2022 at 12:06 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 9, 2015 at 14:32 Star LightStar Light 1742 gold badges8 silver badges19 bronze badges 8
  • 1 What is catchID()? – Blazemonger Commented Apr 9, 2015 at 14:35
  • 1 Unfortunately, the style.width does not give you the percentage that is ing from the CSS. – jwatts1980 Commented Apr 9, 2015 at 14:38
  • 1 The .style object only has styles that are applied directly on the element. Styles implied by CSS rules won't be available there. – Pointy Commented Apr 9, 2015 at 14:39
  • @Blazemonger My bad, catchID() is just my own function to get ID element. I have fix the right code. – Star Light Commented Apr 9, 2015 at 14:41
  • @jwatts1980 I did try on w3schools./jsref/prop_style_width.asp and it working pretty well with other HTML code. – Star Light Commented Apr 9, 2015 at 14:44
 |  Show 3 more ments

3 Answers 3

Reset to default 5

Give this a shot:

var x = document.querySelector('#x');
var initialWidth = x.clientWidth;

window.onresize = function() {
  //Be careful about calculating too many things in the resize handler!
  //This isn't that intensive, so it shouldn't matter, but look into "debouncing" if you have things like this elsewhere
  initialWidth = x.clientWidth;
};

document.getElementById("a").onclick = function() {
  x.style.width = x.clientWidth - (initialWidth * 0.01) + "px";
};
nav#control {
  display: flex;
  flex-basis: 50px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  padding: 5px;
  width: 100%
}
.knob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer
}
#b {
  position: relative;
  flex-grow: 1;
  background: #EFEFEF;
  margin: 0 10px;
  height: 30px
}
#x {
  position: absolute;
  background: #4C8EFA;
  width: 100%;
  height: 30px;
  border-radius: 1px;
  z-index: 2
}
#c {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}
<nav id='control'>
  <section id='a' class='knob'>
    <img src='x.png' />
  </section>
  <section id='b'>
    <div id='x'></div>
    <div id='c'>background</div>
  </section>
  <section id='d' class='knob'>
    <img src='x.png' />
  </section>
</nav>

This uses clientWidth to get the real width of the element (in terms of pixels), takes 1% off that number, then reset the number back to pixels again.

Explanation:

In your original code, you were trying to access style.width of #x. Since this is a percentage, and not a static value, this will actually return nothing. Luckily, we can get the rendered width of the element with Javascript's clientWidth property. Using this, we can find the real size of the bar, and calculate the new values from that.

It also might be possible to directly inject the CSS with insertRule - but I don't see any problems with the clientWidth solution.

EDIT: Use @jwatts1980's solution from the ments: http://jsfiddle/a9okwLd1/1/

This bit is kinda messy:

catchID('a').onclick = function() {
    var
        lost = document.querySelector('#x').style.width,
        lost = lost.slice(0, -1);
    lost = Number(lost);
    lost -= 1;
    document.querySelector('#x').style.width = lost + '%';
}

Also, what is catchID()?

Try this:

document.querySelector('a.knob').addEventListener('click', function() {
    var elem = document.getElementById('x');
    elem.offsetWidth = .99 * elem.offsetWidth;
}, false);

Try like so:

var w=document.getElementById("x").offsetWidth,
r=parseInt(w*.01);
document.getElementById("a").addEventListener("click",function(){
    w-=r;
    document.getElementById("x").style.width=w+"px";
},0);
发布评论

评论列表(0)

  1. 暂无评论