有朋友在用某漫畫網站在線看漫畫，但是那個網站會把漫畫圖片右旋90度，如圖。
于是，他就像我發起了求助，問我能不能寫個腳本。我說，AI都發展到2025了，前端（腳本）這種東西還用自己寫嗎，我就用WPS的靈犀AI，2分鐘就把腳本寫好了。下面就以此為例，介紹一下AI來寫前端腳本的方法。
1、定位目標圖片元素
按F12打開瀏覽器開發者窗口，點擊左上角的定位功能。
此時，將鼠標指向目標圖片，就會在開發者窗口中定位到該元素。
右鍵選擇該元素，選擇復制，復制CSS選擇器
2、讓AI寫代碼
直接將復制的CSS 選擇器粘貼進來，然后問AI，“幫我寫油猴腳本，實現XXX的功能，目標元素的CSS Selector是XXXX”。
這個功能比較簡單，都無需修改，生成可直接使用。
// ==UserScript==
// @name 旋轉.img-content圖片90度
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 將指定CSS選擇器下的圖片向右旋轉90度
// @author 你自己
// @match *://*/*
// @grant none
// ==/UserScript==(function() {'use strict';// 定義旋轉函數function rotateImages() {// 獲取所有.img-content內的圖片元素const images = document.querySelectorAll('.img-content img');images.forEach(img => {// 應用旋轉樣式（向右旋轉90度）img.style.transform = 'rotate(90deg)';// 可選：調整布局（旋轉后可能導致的布局問題）img.style.display = 'block'; // 避免行內元素間隙img.style.margin = '10px auto'; // 居中顯示img.style.maxWidth = '100%'; // 保持容器內寬度});}// 頁面加載完成后執行if (document.readyState === 'loading') {document.addEventListener('DOMContentLoaded', rotateImages);} else {rotateImages();}// 可選：監聽動態加載的內容（如果頁面有異步加載圖片的情況）const observer = new MutationObserver(rotateImages);observer.observe(document.body, {childList: true,subtree: true,attributes: true,attributeFilter: ['src'] // 監聽圖片src變化});
})();你也可以把目標網站告訴他，讓他來適配鏈接。比如
// ==UserScript==
// @name 百度頁面.img-content圖片旋轉90度
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 在百度頁面中將.img-content內的圖片向右旋轉90度
// @author 你自己
// @match https://www.baidu.com/* // 僅匹配百度域名下的頁面
// @grant none
// ==/UserScript==(function() {'use strict';function rotateImages() {// 精確匹配百度頁面中的.img-content下的圖片const images = document.querySelectorAll('.img-content img');images.forEach(img => {// 應用向右旋轉90度（transform屬性）img.style.transform = 'rotate(90deg)';// 可選布局調整（根據百度頁面實際情況優化）img.style.display = 'block'; // 避免行內元素默認間隙img.style.margin = '10px auto'; // 水平居中img.style.maxWidth = '90%'; // 適配百度容器寬度（可根據實際調整）});}// 頁面加載完成后立即執行if (document.readyState === 'loading') {document.addEventListener('DOMContentLoaded', rotateImages);} else {rotateImages();}// 監聽頁面動態加載的新內容（如百度搜索結果滾動加載圖片）const observer = new MutationObserver(rotateImages);observer.observe(document.body, {childList: true, // 監聽子節點變化subtree: true, // 監聽所有后代節點attributes: true, // 監聽屬性變化attributeFilter: ['src'] // 重點監聽圖片src屬性變更（懶加載場景）});
})();3、效果展示
