Question

如何使用javascript在特定位置后添加css border-right。举例来说：

<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的位置，就像tom准备的演示http://jsfiddle.net/zUxmd/2/一样。这有可能以任何方式添加标记到该位置。但我不想添加任何额外的虚拟div。

编辑： 由david提出的演示http://jsfiddle.net/davidThomas/zUxmd/7/正是我想要的。任何更好的主意都会受到赞赏。

Answer 1

好的，元素的边框出现在该元素的 border 上。 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 Fiddle demo

已编辑添加一个...... 凌乱（非优化）纯粹演示（且未经推荐）的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 proof-of-concept

参考文献：

document.createElement()。

element.clientHeight。

element.clientWidth。

node.appendChild()。

node.insertBefore()。

node.nextSibling。

parseInt()。

Answer 2

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

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

请记住，需要IE的替代方案 - 请参阅CSS gradients support

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');
});

<强> DEMO 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');
});

<强> DEMO 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;
}

JS：

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

Answer 6

如果您想要多个边框，请尝试:after和: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/

在div中添加css border-right

7 个答案: