Question

这在IE中运行良好，但我在chrome中测试它并不起作用。首先，我创建一个带有HTML标签和颜色下拉选择的文本区域。它应该写入文本区域“这是一个p标签”，并以您从下拉选择中选择的颜色。 jsFiddle。我只知道javascript，还没有开始学习jQuery。

function createTextArea() {
    var textAreaElement = document.createElement("textarea");
    textAreaElement.id = "textarea";
    textAreaElement.rows = "13";
    textAreaElement.cols = "25";
    document.body.appendChild(textAreaElement);
}

function textArea() {
    var textarea = document.getElementById("textarea");
    var mylist = document.getElementById("myList");
    var options = mylist.options[mylist.selectedIndex].text;
    var color = textcolor.options[textcolor.selectedIndex].text;
    var element = document.createElement(options);
    var mytext;
    var textColor;

    switch (options) {
        case "p":
            mytext = "I am a paragraph tag.";
            break;
        case "div":
            mytext = "I am a div tag.";
            break;
        case "span":
            mytext = "I am a span tag.";
            break;
        case "strong":
            mytext = "I am a strong tag.";
            break;
        case "h1":
            mytext = "I am a h1 tag.";
            break;
        case "em":
            mytext = "I am a em tag.";
            break;
    }

    switch (color) {
        case "Red":
            textColor = "red";
            break;
        case "Blue":
            textColor = "blue";
            break;
        case "Pink":
            textColor = "pink";
            break;
        case "Green":
            textColor = "green";
            break;
        case "Crimson":
            textColor = "crimson";
            break;
        case "Yellow":
            textColor = "yellow";
            break;
        case "Dark Slate Blue":
            textColor = "DarkSlateBlue";
            break;
        case "Dark Orange":
            textColor = "DarkOrange";
            break;
        case "Dark Violet":
            textColor = "DarkViolet";
            break;
        case "Deep Pink":
            textColor = "DeepPink";
            break;
        case "Fuchsia":
            textColor = "Fuchsia";
            break;
        case "Lime":
            textColor = "Lime";
            break;
        case "Maroon":
            textColor = "Maroon";
            break;
        case "Saddle Brown":
            textColor = "SaddleBrown";
            break;
        case "Teal":
            textColor = "Teal";
            break;
    }
    var text = document.createTextNode(mytext);
    element.style.color = textColor;
    element.appendChild(text);
    textarea.appendChild(element);
}

function textAreaElements() {
    var selectElement = document.createElement("select");
    selectElement.id = "myList";
    selectElement.onchange = textArea;

    for (i = 0; i < 7; i++) {
        var options = document.createElement("option");
        var elements;
        switch (i) {
            case 0:
                elements = " ";
                break;
            case 1:
                elements = "p";
                break;
            case 2:
                elements = "div";
                break;
            case 3:
                elements = "span";
                break;
            case 4:
                elements = "strong";
                break;
            case 5:
                elements = "h1";
                break;
            case 6:
                elements = "em";
                break;
        }
        var text = document.createTextNode(elements);
        document.body.appendChild(selectElement);
        selectElement.appendChild(options);
        options.appendChild(text);
    }
}

function textAreaColor() {
    var selectElement = document.createElement("select");
    selectElement.id = "textcolor";
    selectElement.onchange = textArea;
    for (i = 0; i < 16; i++) {
        var options = document.createElement("option");
        var color;
        switch (i) {
            case 0:
                color = " ";
                break;
            case 1:
                color = "Red";
                break;
            case 2:
                color = "Blue";
                break;
            case 3:
                color = "Pink";
                break;
            case 4:
                color = "Green";
                break;
            case 5:
                color = "Crimson";
                break;
            case 6:
                color = "Yellow";
                break;
            case 7:
                color = "Dark Slate Blue";
                break;
            case 8:
                color = "Dark Orange";
                break;
            case 9:
                color = "Dark Violet";
                break;
            case 10:
                color = "Deep Pink";
                break;
            case 11:
                color = "Fuchsia";
                break;
            case 12:
                color = "Lime";
                break;
            case 13:
                color = "Maroon";
                break;
            case 14:
                color = 'Saddle Brown';
                break;
            case 15:
                color = 'Teal';
                break;
        }

        var text = document.createTextNode(color);
        document.body.appendChild(selectElement);
        selectElement.appendChild(options);
        options.appendChild(text);
    }
}      

createTextArea();
textAreaElements();
textAreaColor();

Answer 1

我认为这种变化是你想要的，我不认为儿童被允许textarea

可替换的字符数据在HTML语法的文档中，标题   和textarea元素可以包含可替换的字符数据。   可替换的字符数据可以包含以下内容：

文字，可选择包括“＆lt;”字符字符引用   可替换字符数据具有以下限制：

不得包含任何含糊不清的＆符号，且不得含有任何符号   出现字符串“”或“/".

textarea.style.color = textColor;
//element.appendChild(text);
//textarea.appendChild(element);
textarea.value = mytext;

这适用于IE，但不适用于Chrome。如何让它在所有浏览器中运行？

1 个答案: