Question

我的页面包含以下内容：

输入文字
按钮
段落

我希望用户在输入字段中输入CSS代码，然后当他点击按钮时，必须将代码应用于段落。

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

我制作了这个代码，但是它有一个问题，我认为它是关于连接所以代码。有人可以帮我吗？

这是我的代码 - js第10行

＆＃13;

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];
};

＆＃13;

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

＆＃13;

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

尝试输入此值：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>

Answer 3

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>

如何使用Js

3 个答案: