在CSS中使用JS來操作圖片是一個常見的需求，但通常我們不會直接在CSS文件中寫入JS代碼，相反，我們會在HTML文件中使用JS來操作CSS樣式，以下是一些常見的操作方法和步驟：

1、獲取圖片元素：我們需要獲取到圖片的元素，這通常是通過document.getElementById或者document.querySelector來完成的。

var image = document.getElementById('myImage');

或者

var image = document.querySelector('img#myImage');

2、操作圖片：一旦我們獲取到了圖片元素，就可以對其進行各種操作了，我們可以改變圖片的大小、位置、透明度等。

// 改變圖片的大小
image.style.width = '200px';
image.style.height = '200px';
// 改變圖片的位置
image.style.left = '50px';
image.style.top = '50px';
// 改變圖片的透明度
image.style.opacity = 0.5;

3、綁定事件：我們還可以給圖片綁定一些事件，比如點擊事件、鼠標懸停事件等。

// 綁定點擊事件
image.addEventListener('click', function() {
  alert('圖片被點擊了！');
});
// 綁定鼠標懸停事件
image.addEventListener('mouseover', function() {
  alert('鼠標懸停在圖片上了！');
});

4、使用CSS類：我們可能會更傾向于通過改變CSS類來改變圖片的外觀和行為。

// 添加一個CSS類來改變圖片的外觀
image.classList.add('my-image-class');

在CSS文件中，我們可以定義這個類：

.my-image-class {
  width: 200px;
  height: 200px;
  left: 50px;
  top: 50px;
  opacity: 0.5;
}

通過以上的步驟，我們可以在JS中靈活地操作CSS樣式，從而實現(xiàn)各種豐富的交互效果，希望這些示例能幫助你更好地理解和應用JS與CSS的交互。