html之制作精美的多行文本框（包括js焦点事件）

男娘i 2022-03-09 05:10 428阅读 0赞

### **科普时间** ###

1、对标签定义一个css样式：

document.getElementById("idname").style.display="none";

2、怎么设置textarea里面文本的间距

line-height: 1.5;

--------------------

### **html页面** ###

css样式

#mcontent {
      margin-top: 6%;
      margin-left: 7%;
      width: 93%;
      font-size: 14px;
      height: 40%;
      line-height: 1.5;
    }

js代码

function setcolor(id){
              document.getElementById(id).style.background="#208EDA";
              document.getElementById(id).style.color="white";
              document.getElementById(id).style.border="solid 1px #C92027";
            }
    
            function savecolor(id){
              document.getElementById(id).style.background="white";
                  document.getElementById(id).style.color="black";
            }

最终效果如下

当失去焦点的时候

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

当获取焦点的时候

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220309/0f0b71b1769a4d0d97f904df10f5ca59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220309/eddcce303d234dabb868ea6b3f0d488e.png