提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

前端编程-拷贝css样式到内联样式

文件 编程 前端 CSS
2023-04-18 14:26:21 时间

网页中，文档结构是由HTML定义的，文档外观是由css(样式文件)定义的。通常css样式可以写在外部单独的css文件中，然后通过<link>元素引入，也可以写在<head>标签的子节点<style>元素中，也可以直接写在DOM元素style属性里（内联样式）。

1.使用css文件的样式定义

2.使用<style>来定义

3.使用内联样式

对于重用的样式最好写在单独的css文件中，比如前端框架，无论是bootstrap还是layui，都用自己单独的css文件来定义通用的元素样式。

对于单独本页面个性化的样式，如果较多也可以定义在单独的css文件中，较少可以写在本页面的<style>元素中，如果需要定义的样式属性不多，也可以写在DOM元素的style属性中。

我们有时在页面中会遇到将table导出为Excel表，或者页面某区域导出为word文档。具体实现可以由前端js库实现，或者后台实现。如果使用外部css文件，或者<style>元素定义，可能会出现导出时丢失样式的情况。这种情况下，我们最好使用内联样式。

但是为需要样式的每个DOM元素定义内联样式有些麻烦。这时候我们可以使用js将外部css文件或<style>元素里的样式拷贝到对应的DOM元素的style属性里。思路为用正则表达式处理css文件或<style>元素里的文本，根据样式选择器选择页面中对应的DOM元素，然后把对应文本区域里的样式属性赋值给对应DOM元素的style属性。

下面简单演示实现原理（只支持class选择器,并且css样式定义时没有使用“,”逗号来同时定义多个选择器的样式）

 
            $('body').find('[class]').each((i, x) => {

                var classes = $(x).attr('class').trim().split(' ');
            
                classes.forEach(class0 => {
                   
                    var styleText=$('style').html();//每次都定义,定义到全局会报错
                       var matches = styleText.match(RegExp('\.' + class0.trim() + '\s*{([^}]*)}'))
                    if (!!matches) {
                        var styleText = matches[1].replaceAll('
', '');
                        var oldStyle = $(x).attr('style');
                        if (!oldStyle) {
                            oldStyle = '';
                        }
                        $(x).attr('style', oldStyle + styleText);
                    }  
                    
                   
                })
          })

效果如下：

执行拷贝css到内联样式js前，DOM元素没有style属性。

执行拷贝css到内联样式js后，DOM元素拷贝了对应的样式到style属性。

相关文章