Question

我想学习一些jQuery，并尝试从简单的东西开始（或者我一直以为是这样），我试图用一些CSS来更改某些div样式，但是它似乎没有用。
关于我在做什么错的任何想法吗？

$('head').append('<style type="text/css"> #main1, #main2 { 
background-image: linear-gradient(to right, #92FE9D, #00C9FF) !important;
color: #000000 !important;
border-radius: 4; } 
</style>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main1">1</div>
<div id="main2">2</div>

Answer 1

您需要连接新行，例如：

$('head').append('<style type="text/css"> #main1, #main2 {'+
'background-image: linear-gradient(to right, #92FE9D, #00C9FF) !important;'+
'color: #000000 !important;'+
'border-radius: 4; }'+
'</style>');

Answer 2

如果要使用CSS更改某些css属性，则需要这样做，例如：

$("p").css("background-color", "yellow");

Answer 3

使用两个反引号将CSS放入模板字符串中：

var css = `
<style type="text/css"> 
    #main1, #main2 { 
        background-image: linear-gradient(to right, #92FE9D, #00C9FF) !important;
        color: #000000 !important;
        border-radius: 4; 
    } 
</style>`;

$('head').append(css);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main1">1</div>
<div id="main2">2</div>

jQuery将css附加到头部

3 个答案: