使用：focus设置外部div的样式？

小编典典

使用：focus设置外部div的样式？

css

当我开始在textarea中写入文本时，我希望带有div框的外部div的边框变为实心而不是虚线，但是在某种情况下：focus不适用于。如果它与：active一起使用，为什么它与：focus不一起使用呢？

有什么想法吗？

（注意。我希望DIV的边框变为实线，而不是文本区域）

div.box
{
    width: 300px;
    height: 300px;
    border: thin dashed black;
}

div.box:focus{
    border: thin solid black;
}

<div class="box">
    <textarea rows="10" cols="25"></textarea>
</div>

阅读 1393

2020-05-16

共1个答案

小编典典

虽然不能仅通过CSS / HTML来实现，但是可以通过JavaScript来实现（不需要库）：

var textareas = document.getElementsByTagName('textarea');

for (i=0;i<textareas.length;i++){
    // you can omit the 'if' if you want to style the parent node regardless of its
    // element type
    if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
        textareas[i].onfocus = function(){
            this.parentNode.style.borderStyle = 'solid';
        }
        textareas[i].onblur = function(){
            this.parentNode.style.borderStyle = 'dashed';
        }
    }
}

顺便说一句，使用jQuery之类的库，以上内容可以简化为：

$('textarea').focus(
    function(){
        $(this).parent('div').css('border-style','solid');
    }).blur(
    function(){
        $(this).parent('div').css('border-style','dashed');
    });

2020-05-16