0

I have inputs that change image. one of them adds default border 10px solid black and other input (radio) should give a shadow to an image (it's border-bottom+border-right) I want to use them both at one time but I cannot. How can I do that?

<script>
function ramka_size(){
    var input = document.getElementById('name').value;
    let ramka = document.getElementsByClassName('woocommerce-product-gallery__image');
    for(var i=0; i<ramka.length; i++){
        ramka[i].style.border= input+'px solid black';
    }
} 

function canvas(){
    var input = document.getElementById('name').value;
    let border = document.getElementsByClassName('woocommerce-product-gallery__image');
    for(var i=0; i<border.length; i++){
    border[i].style.borderBottom= '10px solid grey'; 
    border[i].style.borderRight= '10px solid grey'; 
    }
}

jQuery(document).ready(function($) {
    $('.woocommerce-product-details__short-description').after( \"<input  type='number'  class='form-control' name='name' id='name' onchange='ramka_size()' value='' placeholder='Размер рамки'> <br> <br>  <div> <input type='radio' onclick='canvas()' name='CanvasOrPaper' class='form-control' id='contactChoice1'value = 'canvas'><label for='contactChoice1'>Холст</label> <br> <input type='radio' onclick='paper()' name='CanvasOrPaper' class='form-control' id='contactChoice2' value = 'paper'><label for='contactChoice2'>Бумага</label> </div>\" );
});
</script>
John Conde
  • 217,595
  • 99
  • 455
  • 496
Alex
  • 125
  • 6
  • No, I cannot use `border:before` in JS – Alex Apr 03 '21 at 14:10
  • There are not only answers about `:before`, but also about `box-shadow` and `outline`. You can't do 2 borders in CSS with only `border` property. – sergdenisov Apr 03 '21 at 14:28
  • Do you want the border right and border bottom to be inside or outside the black border when that option is selected, or do you mean that the frame should stay the selected width all round and the bottom and right borders should become gray? – A Haworth Apr 03 '21 at 15:28

1 Answers1

0

If you want to create a shadow, don't waste time in manipulating the border and simply use box-shadow

border[i].style.boxShadow = '10px 10px 4px gray'

The third option determines blur. Set it to 0 for a sharp line.

You can use both border and box shadow at the same time.

Gil
  • 1,794
  • 1
  • 12
  • 18