javascript - 使用react+redux技术在页面实时编辑CSS代码，点击提交之后怎么能够使页面根据编写的CSS样式进行改变？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

有这么一个问题

提供一个编辑区域，能够随意编写CSS代码，然后提交之后能够更改这个页面的一些样式
比如：

p {
   border-color: red;
}

a {
   color: yellow; 
}

这样提交之后，页面上的p的边框都会变成红色，a标签文字变成黄色

使用的技术是利用react+redux更改其state来进行更改CSS样式

希望能够得到一些解决方案，谢谢啦

我自己的想法

在componentDidMount的时候，使用document.queryselector()去循环处理CSS的样式对象，把添加的CSS样式用style加上去，不知道这样的方案是否合理？

巴扎黑

全部回复(3)

高洛峰2017-04-11 11:48:37 3楼

很有趣的需求，有一个想法，不知道能不能行

放一个script组件在页面上
当style组件componentDidMount的时候，获取提交的样式，然后在render里面把样式放到里面

类似这样:

class CustomStyle extends Component {
  componentDidMount(){
    //... 获取style，并保存到state中
  }

  render(){
    return (
      <style>{this.state.styles}</style>
    )
  }
}

没有试过，你可以试试

赞 +0

添加回复

巴扎黑2017-04-11 11:48:37 2楼

我理解你的意思：我在文本框输入border-color:#000 点击提交，下方页面显示的框就会显示黑色，是这样的嘛？
如果是这样，那你把文本框的信息提取输入，点击提交的时候，setState应该可以把

那么页面下方的这个p的样式就可以这样写了

<p style={ this.state.borderColor }>
    //.......
</p>

赞 +0

添加回复

高洛峰2017-04-11 11:48:37 1楼

其实这个解决方案很简单，在提交之后：

// 获取输入框里面的文本内容
const styleContent = ...;
// 创建一个 <style> 标签元素
const styleElement = document.createElement('style');
// 添加样式内容
styleElement.innerHTML = styleContent;
// 放倒 head 里面
document.querySelector('head').appendChild(styleElement)

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>