JavaScript是一種常見的編程語言，常用于網站和應用程序的交互和動態元素的實現。一個常見的應用場景是通過JavaScript改變某些元素的樣式。接下來，我們將學習如何使用JavaScript來實現輸入變量改變CSS。

首先，在我們開始之前，我們需要了解一些CSS屬性和JavaScript中的變量。CSS屬性控制著一個元素的樣式，例如字體大小、背景顏色和邊框大小等，而JavaScript中的變量是用于存儲數據的容器。

// CSS樣式
p {
font-size: 20px;
color: black;
}
// JavaScript變量
var x = 5;
var y = "Hello World!";

現在，我們將演示如何使用JavaScript來改變CSS。下面是一些簡單的代碼，示范如何通過一個輸入變量來改變CSS樣式。

// 獲取輸入元素和按鈕元素
var inputElement = document.getElementById("inputValue");
var btnElement = document.getElementById("btn");
// 添加事件監聽器
btnElement.addEventListener("click", function() {
// 獲取輸入值
var inputValue = inputElement.value;
// 獲取需要改變樣式的元素
var pElement = document.getElementsByTagName("p")[0];
// 更新樣式值
pElement.style.fontSize = inputValue + "px";
});

這段代碼首先獲取了輸入和按鈕元素，然后為按鈕添加了一個單擊事件監聽器。當用戶單擊按鈕時，事件監聽器將執行代碼塊。首先，我們獲取輸入值，然后獲取需要改變樣式的元素。最后，我們更新樣式值，將輸入值作為字體大小。

這是如何在JavaScript中使用輸入變量來改變CSS樣式。當用戶輸入值并單擊按鈕時，樣式值將被更新為輸入值，以此實現動態變化的文本效果。