0

css border-rightjavascriptを使用して特定の位置の後に追加するにはどうすればよいですか。たとえば、これを取ります：

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

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

javascriptを使用してcssスタイルを追加できますが、後で追加したい場合はどうすればよいですcss border-rightか。例http://jsfiddle.net/zUxmd/1/のように、 javascriptを使用してcssボーダーを追加しましたが、特定の方法の後に追加したい場合は、どうすればよいですか。どんな助けでも素晴らしいでしょう。100px#testpx value

更新： 私は次のdiv構造を持っています

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

#1との幅#2はjavascriptで計算され、幅の合計はに設定され#testます。ここで、全幅が、によって作成されたデモhttp://jsfiddle.net/zUxmd/2/のように、188pxどこにあるかを視覚的に区別したいとします。これは、その位置にマーカーを追加するのと同じように、どのような方法でも可能ですか。しかし、ダミーのdivを追加したくありません。100pxtom

編集： デモhttp://jsfiddle.net/davidThomas/zUxmd/7/が作成したものdavidは、まさに私が欲しいものです。より良いアイデアをいただければ幸いです。

4

7 に答える 7

3

さて、要素の境界線がその要素の境界線に表示されます。はその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');​

JSFiddleの概念実証。

参照：

于 2012-05-28T13:29:09.817 に答える
2

これは、CSS グラデーションとカラー ストップでシミュレートできます。

デモ: http://dabblet.com/gist/2819172

IE の代替が必要になることに注意してください - CSS グラデーションのサポートを参照してください。

于 2012-05-28T13:23:13.980 に答える
1

あなたが期待していることはNOT POSSIBLEです。次のトリックを実行できます

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

David が行うことの結果を得るには、次のことを試すことができます。

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

于 2012-05-28T13:38:34.977 に答える
0

できません。

境界線は、要素の (全体の) エッジに沿ってのみ表示できます。

于 2012-05-28T13:22:27.907 に答える
0

私が正しく理解していれば、内側の 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;
}

J:

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

</p>

于 2012-05-28T13:23:35.747 に答える
0

複数の境界線が必要な場合は:after、 and :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/

于 2012-05-28T13:24:51.973 に答える
0

このようなものは、探している効果をもたらしますが、追加の要素を追加する必要があります.

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

于 2012-05-28T13:25:26.150 に答える