有朋友在用某漫画网站在线看漫画，但是那个网站会把漫画图片右旋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属性变更（懒加载场景）});
})();