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

  • Z时代
  • 2024-01-10
  • 分类：问答

当我开始在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>

回答：

虽然不能仅通过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');
    });

以上是 使用：focus设置外部div的样式？ 的全部内容， 来源链接： utcz.com/qa/433862.html

回到顶部