如何使用的js

Question

我的网页采取CSS属性从用户包括以下内容：

1. 输入型文本
2. 按钮
3. 款

我想用户输入的CSS代码在输入字段中，然后当他点击按钮时，代码必须应用到段落中。

示例： 用户在输入处输入了color:red。 他点击了按钮。 他输入的代码（颜色：红色）应该在段落

应用我做了这段代码来做到这一点，但它有一个问题，我认为这是关于连接所以代码。有人可以帮助我吗？

这里是我的代码 - JS行数10

var Inpt = document.getElementById("Inpt"), 
 
    Par = document.getElementById("Par"), 
 
    Btn = document.getElementById("Btn"), 
 
    Val; 
 

 
Btn.onclick = function() { 
 
    "use strict"; 
 
    Val = Inpt.value; 
 
    Val = Val.split(":"); 
 
    Par.style.Val[0] = Val[1]; 
 
};

<input type="text" id="Inpt"> 
 
<button id="Btn"> Apply</button> 
 
<p id="Par">This Is The Paragraph</p>

Answer 1

这里有我的回答，我改变一点点的名字变量，但它的作品像魅力：

HTML：

<input type="text" id="Inpt"> 
<button id="Btn"> Apply</button> 
<p id="Par">This Is The Paragraph</p> 

的Javascript：

var input = document.getElementById("Inpt"), 
    parameter = document.getElementById("Par"), 
    button = document.getElementById("Btn"), 
    value; 

button.onclick = function() { 
    "use strict"; 
    value = input.value; 
    value = value.split(":"); 
    parameter.style[value[0]] = value[1]; 
}; 

的jsfiddle链接：https://jsfiddle.net/wj8o4uq8/

希望它能帮助！

Answer 2

var Inpt = document.getElementById("Inpt"), 
 
    Par = document.getElementById("Par"), 
 
    Btn = document.getElementById("Btn"), 
 
    Val; 
 

 
Btn.onclick = function() { 
 
    "use strict"; 
 
    Val = Inpt.value; 
 
    Par.style.cssText = Val; 
 
};

<input type="text" id="Inpt"> 
 
<button id="Btn"> Apply</button> 
 
<p id="Par">This Is The Paragraph</p>

Answer 3

尝试输入此值：如果您想多种样式color:red;

：color:red;font-size:20px;

var Inpt = document.getElementById("Inpt"), 
 
    Par = document.getElementById("Par"), 
 
    Btn = document.getElementById("Btn"), 
 
    Val; 
 

 
Btn.onclick = function() { 
 
    "use strict"; 
 
    Val = Inpt.value; 
 
    Par.setAttribute("style", Val); 
 
};

<input type="text" id="Inpt"> 
 
<button id="Btn"> Apply</button> 
 
<p id="Par">This Is The Paragraph</p>