Question

我想将CSS文件中的样式应用于使用Javascript创建的HTML类。

我的代码如下所示 `

    socket.on('chat', function (data) {
        feedback.innerHTML = '';
        var mewTime = document.createElement("span")
        mewTime.class = "chatTime";
        mewTime.text = data.currentTime;

        console.log(mewTime);

        var userName = createUser(data, mewTime);

        var content = document.createElement("span")
        content.class = "messageContent"
        content.append(data.messageInput)

        var message = document.createElement("div")
        message.class = "message";
        message.append(userName[0].outerHTML);
        message.append(mewTime);
        message.append(document.createElement("br"))
        message.append(content);

        output.append(message);

        currentTime = '';
        messageInput.focus();
    });

function createUser(data, time){
    if(time === null){
        var userName = $('<span class="userNameOnline"/>');
        userName.text(data);  
    } else{
        var userName = $('<span class="userName"/>')
            .text(data.username + ' ' + time.text);
    }
    console.log(userName);
    return userName;
}

// CSS
.message{
color: red;
}

.userName {
color: blue;
}

`

我可以访问消息中的文本，但是无法使用CSS设置样式。

我尝试使用.outerHTML，.innerHTML，.text。在控制台上，它显示该类的设置正确

Answer 1

您可以致电.setAttribute("attributeName", "value of attribute")，也可以使用.className代替普通的class。因此，对于您的示例，我们可以有类似以下内容：

var mewTime = document.createElement("span");
mewTime.setAttribute("class", "chatTime");

OR

var mewTime = document.createElement("span");
mewTime.className = "chatTime"

Answer 2

$(document).ready(function() {
    document.getElementById("divTest").classList.add('red');
});

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    
  </head>
  <body>
    <div id='divTest'>
      test
    </div>
  </body>
</html>

您应该使用classList：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

如果可行，请标记为接受

Answer 3

您正在寻找classList.add('')而不是class = ''。您可以在here上找到更多信息。

这是一个基本示例。

   
var message = document.createElement("div")
message.classList.add("message")


document.getElementById("output").append(message);

.message {
  height: 200px;
  width: 200px;
  background: blue;
}

<div id="output"></div>

在您的代码中，您可以将其更改为以下内容，并且应该可以使用：

var message = document.createElement("div")
message.classList.add("message")
message.append(userName[0].outerHTML);
message.append(mewTime);
message.append(document.createElement("br"))
message.append(content);

output.append(message);

Answer 4

您可以使用以下示例在CSS中将CSS应用于HTML元素：

colorScheme = {
        domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
    };

    //////////////////////////

        sampleData: any = [];

        padding: any = { left: 20, top: 5, right: 20, bottom: 5 };

        titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };

        xAxis: any =
        {
            dataField: 'name',
            gridLines: { visible: true },
            flip: false
        };

        valueAxis: any =
        {
            flip: true,
            labels: {
                    visible: true,
                    formatFunction: (value: string) => {
                        return parseInt(value, 10) / 1000000;
                }
            }
        };

        seriesGroups: any[] =
        [
            {
                type: 'column',
                columnsGapPercent: 50,
                seriesGapPercent: 0,
                valueAxis:
                {
                    unitInterval: 100000,
                    minValue: 0,
                    maxValue: 1000000,
                    displayValueAxis: true,
                    description: 'Amount  (in lakhs)',
                    axisSize: 'auto',
                    tickMarksColor: '#888888',
                    formatFunction: (value: string) => {
                        return parseInt(value, 10) / 100000 || 5;
                    }
                },
                series: [
                    { dataField: 'value', displayText: 'Amount' }
                ]
            }
        ];

Answer 5

您可以这样做

function myFunction() {
var message = document.createElement("span");
message.innerHTML = "Test"
        message.className = "message";
        
         document.body.appendChild(message);
}

.message{
color:red;
}

<!DOCTYPE html>
<html>
<body>

<p>Click the button to make element.</p>

<button onclick="myFunction()">Create</button>

<script>

</script>

</body>
</html>

Answer 6

以下是实现此目的的方法。

var newElement = document.createElement("p");
newElement.setAttribute("class", "className");

Answer 7

只需将 class 更改为 className ，希望对您有所帮助。谢谢

    mewTime.className = "chatTime";

    content.className = "messageContent"

    message.className = "message";

将CSS样式应用于使用javascript创建的HTML类

7 个答案: