Javascript 在div中添加css边框

如何使用javascript在特定位置后添加

css右边框

。例如：

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

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

用javascript计算

#1

和

#2

的宽度，宽度之和设置为

#test

。假设现在，如果总宽度是

188px

，我想从视觉上区分

100px

的位置，就像

tom

准备的演示一样。这是否有可能，就像在那个位置添加标记一样。但是我不想添加任何额外的虚拟div

编辑：

david的演示正是我想要的。如果有更好的主意，我们将不胜感激。
你不能

边框只能沿元素的（整个）边缘显示。
不能

边框只能沿元素的（整个）边缘显示。
您可以使用CSS渐变和颜色停止来模拟此效果

演示：

请记住，将需要IE的替代方案-请参见
您可以使用CSS渐变和颜色停止来模拟这一点

演示：

请记住，需要IE的替代方案-请参见
如果我理解正确，我会添加一个内部div：

Html:

Js:

更新

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


Html:

​
Js:

​
 如果我理解正确，我会添加一个内部div：

Html:

Js:

更新

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


Html:

​
Js:

​
 如果希望有多个边框，请尝试在
：之后和
：之前创建

    #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;  
    }  

如果希望有多个边框，请尝试在
之后和
之前使用

    #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;  
    }  

这样的东西会给你想要的效果，但它需要添加一个额外的元素

这样的东西会给你想要的效果，但它需要添加一个额外的元素

好的，元素的边框将显示在该元素的边框上。
边框
表示该元素的最外层边界，因此它不能出现在元素本身中，也不能与它出现的元素侧的长度不同

但是，也就是说，您可以通过
addClass（）
和
：：after
伪元素笨拙地模拟您想要的内容：

CSS:

jQuery：

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



编辑添加一个杂乱（未优化）的纯演示（未推荐）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');​


参考资料：









好的，元素的边框将显示在该元素的边框上。
边框
表示该元素的最外层边界，因此它不能出现在元素本身中，也不能与它出现的元素侧的长度不同

但是，也就是说，您可以通过
addClass（）
和
：：after
伪元素笨拙地模拟您想要的内容：

CSS:

jQuery：

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



编辑添加一个杂乱（未优化）的纯演示（未推荐）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');​


参考资料：









您所期望的是不可能的。你可以做下面的把戏

HTML:

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

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

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

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

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

jQuery:

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

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

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

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

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


要获得David所做的结果，您可以尝试：

HTML:

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

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

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

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

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

jQuery:

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

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

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

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

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

你所期待的是不可能的。你可以做下面的把戏

HTML:

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

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

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

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

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

jQuery:

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

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

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

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

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


要获得David所做的结果，您可以尝试：

HTML:

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

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

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

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

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

jQuery:

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

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

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

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

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

在特定px值之后添加它是什么意思
边框在元素的边框上。
边框将被新值替换。@RoryMcCrossan:我想在
#test
中的
100px
之后添加
css边框右
。这是可能的吗？@user850234不，不是单个元素。什么意思
在特定px值之后添加它
？
边框
在元素的边框上。值将被新值替换。@RoryMcCrossan:我想在
中的
100px
之后添加
css边框右
。这可能吗？@user850234不，一个元素都没有。谢谢。我想通过视觉上的区别来理解这是
100px
一张100 px宽的透明gif背景图像，右边缘有一个实心像素就可以了。。。在y轴上重复…你是说一个100像素乘以1像素的重复y轴？如果我用的是图像，或者是一个1px x 1px的蓝点，有背景位置，重复一次。如果元素总是“谢谢”的话，这是个好主意。我想通过视觉上的区别来理解这是
100px
一张100 px宽的透明gif背景图像，右边缘有一个实心像素就可以了。。。在y轴上重复…你是说一个100像素乘以1像素的重复y轴？如果我用的是图像，或者是一个1px x 1px的蓝点，背景位置和重复yIt是个好主意，如果元素始终是Yes，你明白我的意思，但除了添加div，是否有其他方法可以直观地告诉我这是
100px
是的，你明白我的意思，但除了添加div，是否有其他方法可以直观地告诉我这是
100px
这很好，谢谢实际p