我怎樣才能動態改變使用JavaScript和jQuery的css屬性

如何使用js或jquery動態地改變H1標籤的CSS屬性。我的意思是假設我有一個H1標籤，其中有class fh，另一個H1標籤有class sh，我怎樣才能改變字體大小，顏色是獨立的。我做了一個，但沒有工作。我怎樣才能達到目的？我怎樣才能動態改變使用JavaScript和jQuery的css屬性

const inputs = document.querySelectorAll('.controls input'); 

function handleUpdate() { 
    const suffix = this.dataset.sizing || ''; 
    document.documentElement.style.setProperty(`${this.name}`, this.value + suffix); 
} 

inputs.forEach(input => input.addEventListener('change', handleUpdate)); 
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

這裏是我的fiddle

更新：我怎樣才能通過動態感測h1或p標籤在我的小提琴這樣做還有一個範圍滑塊我想，當我在H1單擊當前值（我H1的性能）來分別在範圍滑塊和我可以對其進行編輯

來源

2017-06-15 user7791702

$（「H1」）鼠標移動（函數（）{ \t $（本）的CSS（「顏色」，「紅色」）; }）。 –

您可以用jQuery的CSS改變這樣的：

$("css-selector").css("property", "value");

您可以使用任何css選擇器（＃代表ids，。對於課程等）。

EDIT（考慮您的要求）：

看看這段代碼。 這不是完全可行的，但它可能會給你一個如何使用jQuery的例子。你會發現css的變化和事件，所以你可以自己嘗試一下。

const inputs = $(".contorl input"); 
 
let active = $(".fh"); 
 

 
$("#fontsize").on("input", function(){ 
 
\t active.css("font-size", $("#fontsize").css("font-size")); 
 
}); 
 

 
$("#fontcolor").on("input", function(){ 
 
\t active.css("color", $("#fontcolor").css("color")); 
 
}); 
 

 
$(".fp").click(function(){ 
 
\t $("#fontcolor").val($(".fp").css("color")); 
 
    $("#fontsize").val($(".fp").css("font-size")); 
 
    active = $(".fp"); 
 
}); 
 

 
$(".sh").click(function(){ 
 
\t $("#fontcolor").val($(".sh").css("color")); 
 
    $("#fontsize").val($(".sh").css("font-size")); 
 
    active = $(".fh"); 
 
}); 
 

 
$(".fh").click(function(){ 
 
\t $("#fontcolor").val($(".fh").css("color")); 
 
    $("#fontsize").val($(".fh").css("font-size")); 
 
    active = $(".fh"); 
 
}); 
 

 
$(".sp").click(function(){ 
 
\t $("#fontcolor").val($(".sp").css("color")); 
 
    $("#fontsize").val($(".sp").css("font-size")); 
 
    active = $(".sp"); 
 
});

.firstclass{ background-color:black;} 
 
.secondclass {background-color:black;} 
 
h1 {text-align:center;} 
 
p {text-align:center;} 
 

 
.fh { 
 
    color:white; 
 
    font-size:35px; 
 
} 
 
.fp { 
 
    color:white; 
 
    font-size:15px; 
 
} 
 
.sh { 
 
    color:red; 
 
    font-size:35px; 
 
} 
 
.sp { 
 
    color:red; 
 
    font-size:15px; 
 
}

<div class="controls"> 
 
    <label for="fontsize">Font size:</label> 
 
    <br> 
 
    <input id="fontsize" type="range" name="fs" min="10" max="200" value="10" data-sizing="px"> 
 
    <br> 
 
    <label for="fontcolor">Font Color:</label> 
 
    <br> 
 
    <input id="fontcolor" type="range" name="fc" min="0" max="25" value="0" data-sizing="px"> 
 
    <br> 
 
    <label for="base">Base Color:</label> 
 
    <br> 
 
    <input id="base" type="color" name="base" value="#95c6c6"> 
 
</div> 
 

 
<div class="firstclass"> 
 
    <h1 class="fh">Title</h1> 
 
    <p class="fp">This is some Para</p> 
 
</div> 
 

 
<div class="secondclass"> 
 
    <h1 class="sh">Title</h1> 
 
    <p class="sp">This is some Para</p> 
 
</div> 
 

 
<script 
 
\t \t \t src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
\t \t \t integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
\t \t \t crossorigin="anonymous"></script>

來源

2017-06-15 08:05:03 Wernerson

嗯，你可以告訴我，我怎麼能通過動態感應h1或p在我的小提琴中有一個範圍滑塊，我希望當我點擊h1時，我的h1的當前值（屬性）分別來自範圍滑塊。 – user7791702

我怎樣才能動態改變使用JavaScript和jQuery的css屬性

回答

相關問題