[JavaScript知识库]还不会修改placeholder属性？速来学习

? ? ? ? 在日常开发中我们经常需要使用表单，当我们需要用到提示信息时，首先就会考虑到placeholder属性。那么我们应该如何去修改这个属性的相关样式呢？

????????placeholder 属性提供可描述输入字段预期值的提示信息（hint），该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

? ? ? ? 首先我们知道在CSS中使用伪类去修改placeholder的样式，如下：

 input::placeholder {
            color: pink;
        }

?修改后的文字样式：

????????ok当我们知道可以通过css去修改样式时，我们就可以想到，怎么使用js动态修改placeholder的样式了，我们可以提前写好一个类，通过js给这个input表单动态加上类名或者删除类名，那么应该怎么加呢？

? ? ? ? 第一步：通过交集选择器，选出我们需要修改的元素并使用伪类修改样式。

   #myInput.change::placeholder{
            color: skyblue;
        }

? ? ? ? 第二步：设置元素，给input表单添加上id。

  <input type="text" placeholder="请输入内容" id="myInput">

? ? ? ? 第三步：使用js获取元素，为元素添加change类。

//jQuery做的  
$("#myInput").on("focus",function(){
            $(this).addClass("change");
        });

// 原生js
       var myInput = document.getElementById("myInput");
        myInput.addEventListener("focus", function () {
            this.setAttribute("class", "change");
        });

? ? ? ? 当我们设置好以上三步，就可以给placeholder属性动态设置样式了，是不是很简单！

补充知识点：

? ? ? ? 交集选择器

? ? ? ? 1.交集选择器就是在两个标签相交的部分，也就是交集进行修改格式。

? ? ? ? 2.对于交集选择器，可以与id和class共同使用。

格式：

标签1.标签2

{

? ? ? ?属性;

}

? ? ? ? 该选择器的满足条件是同时拥有被选中的两个标签，所以我们上面在设置样式时，因为没有给input元素添加上change类，所以最开始就没有被选出来。

? ? ? ? 修改完样式，我们应该怎么去修改placeholder的文字呢？这是一个input表单中的属性，所以我们可以使用原生js中的setAttribute属性或者jQuery中的prop属性更改文字值。

// jQuery

    $("#myInput").on("focus",function(){
            $(this).addClass("change").prop("placeholder","1231213")
        });

// js
    var myInput = document.getElementById("myInput");
        myInput.addEventListener("focus", function () {
            this.setAttribute("class", "change");
            this.setAttribute("placeholder", "123123")
        });

? ? ? ? 现在我们就可以根据开发需求为placeholder动态修改样式了！学废了吗？

?