javascript - 在 div 中添加 css border-right

Question

如何css border-right使用 javascript 在特定位置后添加。以这个为例：

<div id="test"></div>

<style>
  #test {
    background-color : red;
    height : 30px;
    width : 200px;
  }
</style>

我们可以使用 javascript 添加 css 样式，但如果我想在css border-right之后添加100px，#test那么我该怎么做。在示例http://jsfiddle.net/zUxmd/1/中，我使用 javascript 添加了 css 边框，但如果我想在特定之后添加它，px value我该怎么做。任何帮助都会很棒。

更新： 我有以下div结构

<div id=test>
 <div id="1"></div>
 <div id="2"></div>
<div>

#1和的宽度#2在 javascript 中计算，宽度的总和设置为#test. 现在假设如果总宽度是188px我想在视觉上区分哪里100px就像演示http://jsfiddle.net/zUxmd/2/准备的一样tom。这是否可能以任何方式就像在该位置添加标记一样。但我不想添加任何额外的虚拟 div。

编辑： 演示http://jsfiddle.net/davidThomas/zUxmd/7/david正是我想要的。任何更好的想法将不胜感激。

Answer 1

好的，一个元素的边框出现在该元素的边框上。表示该border元素的最外边界，因此它不能出现在元素本身内，也不能与它出现的元素边的长度不同。

但是，也就是说，您可以通过伪元素笨拙地模仿您想要addClass()的东西：::after

CSS：

#test.amended {
    width: 100px;
    position: relative;
    border-right: 2px solid blue;
}
​#test.amended::after {
    content: '';
    position: absolute;
    top: 0;
    left: 102px;
    bottom: 0;
    display: inline-block;
    width: 98px;
    background-color: red;
}​

jQuery：

$(document).ready(function(){
    $('div').addClass('amended');
});

JS 小提琴演示。

---

编辑添加一个...凌乱（未优化）纯粹演示（和不推荐）的 JavaScript 解决方案：

function borderAt(el, pos) {
    if (!el || !pos) {
        return false;
    }
    else {
        var pos = parseInt(pos, 10), // ensures a valid number (though there should be a sanity-check too)
            w = el.clientWidth,
            h = el.clientHeight,
            nEl = document.createElement('div'),
            pEl = document.createElement('div');

        // adds a new 'parent' element to contain the elements
        el.parentNode.appendChild(pEl);

        // assigns the width of the specified 'el' element
        pEl.style.width = w + 'px';

        // appends the 'el' element to its new parent
        pEl.appendChild(el);
        nEl.style.backgroundColor = 'red';

        // so the new sibling appears side-by-side
        nEl.style.display = 'inline-block';

        /* calculates the width required by the new-sibling element
          in order to maintain visual continuity with the previous width */
        nEl.style.width = w - (pos + 2) + 'px';
        nEl.style.height = h + 'px';
        el.style.borderRight = '2px solid blue';
        el.style.width = pos + 'px';
        el.style.display = 'inline-block'; // so the 'el' element appears side-by-side with its new sibling

        // inserts new sibling after the 'el' element within its parent.
        el.parentNode.insertBefore(nEl, el.nextSibling);
    }
}

var el = document.getElementById('test');
borderAt(el, '160px');​

JS Fiddle 概念验证。

参考：

• document.createElement().
• element.clientHeight.
• element.clientWidth.
• node.appendChild().
• node.insertBefore().
• node.nextSibling.
• parseInt().

Answer 2

您可以使用 CSS 渐变和色标来模拟这一点。

演示：http ://dabblet.com/gist/2819172

请记住，将需要 IE 的替代方案 - 请参阅CSS 渐变支持

Answer 3

你所期待的是不可能的。你可以做以下技巧

HTML：

<div class="wrapper">
    <div id="test"></div>
</div>

CSS：

#test{
 background-color:red;
 height: 30px;
 width: 200px;    
}
.wrapper.bordered {
    width: 300px;
    border-right: 2px solid blue;
}

jQuery：

$(document).ready(function(){
  $('div.wrapper').addClass('bordered');
});

演示 1

要得到结果大卫做什么，你可以尝试：

HTML：

<div id="test">
    <span class="bordered">&nbsp;</span>
</div>

CSS

#test{
    background-color:red;
    height: 30px;
    width: 200px;  
    position: relative;       
}
.bordered {
    width: 2px;
    background: blue;
    height: 30px;
    position: absolute;
}

jQuery：

$(document).ready(function(){
  $('span.bordered').css('left', '100px');
});

演示 2

Answer 4

你不能。

边框只能沿着元素的（整个）边缘出现。

Answer 5

如果我理解正确，我会添加一个内部 div：http: //jsfiddle.net/zUxmd/1/

html:

<div id="test">
    <div class="inner">
    </div>
</div>​​​​​​​​​

CSS：

#test{
 background-color:red;
 height: 30px;
 width: 200px;    
}
#test .inner {
    height: 100%;
    width: 100px;
}

JS：

 $(document).ready(function(){
   $('#test .inner').css('border-right','2px solid blue');
 });

更新

这是使用背景图像的另一种可能性，想法是使用 1px x 1px 蓝点，但我找不到该图像：P

http://jsfiddle.net/zUxmd/5/

html:

<div id="test"></div>​ 

CSS：

#test{
  background-color:red;
  height: 30px;
  width: 200px;
}
#test.limit {
  background-image: url("http://www.scratchingpostgazette.com/forum/styles/Blue-Crush/theme/images/blue.gif");
  background-repeat: repeat-y;
  background-position: 100px 0;
}

​​​​​​

$(document).ready(function(){
  $('#test').addClass('limit');
});

​</p>

Answer 6

如果你想有多个边框，试试:afterand :before;

    #test {  
        background: red;  
        border: 1px solid #bbbbbb;  
        width: 200px;  
        height: 200px;  
        margin: 50px auto;  
        position: relative;  
    }  

    #test:before {  
        border: 1px solid blue;  
        content: '';  
        width: 198px;  
        height: 198px;  
        position: absolute;  
    }  

    #test:after {  
        content: '';  
        position: absolute;  
        width: 196px;  
        height: 196px;  
        border: 1px solid yellow;  
        left: 1px; top: 1px;  
    }  

http://jsfiddle.net/hHxHN/3/

Answer 7

像这样的东西会产生你正在寻找的效果，但它涉及添加一个额外的元素。

http://jsfiddle.net/zUxmd/2/