css样式attr()获取元素属性值测试
有时候，不想把样式设置太死，想灵活变化，可能会想到动态传值，这时候我们可以使用css的attr()方法，如下所示，根据传入的几个data-width我们分别设置像素px,百分比%，以及默认的百分比，和data-content作为内容填充。
代码如下：
<!doctype html> <html> <head> <style> .root{ background: #ddd; border-radius: attr(data-width px); height: attr(data-width px); width: attr(data-width px); display: flex; justify-content: center; align-items: center; } .rect{ background: #c2ff77; width: attr(data-width %); --h : 50px; height: var(--h); } .default{ background: #0088ff; width: attr(data-width); } .content{ background: #ddd; } .content:before{ content: attr(data-content); display: block; color: red; } </style> </head> <body> <div class="root">![]()
可以看到，通过第一个attr(data-width px)的方式，设置像素，的确生效了。如果不生效，默认宽度是满屏100%。
![]()
查看元素样式， 我们注意观察attr()方法，默认data-width是一个带引号""的"300"，当attr()方法使用过后，变为了300px
生效的属性值是没有引号的。
第二个效果是通过attr(data-width %)的方式，设置宽度百分比，同样生效了。
![]()
查看元素样式， 我们注意观察attr()方法，默认data-width是一个带引号""的"30"，当attr()方法使用过后，变为了30%
同样的，生效的属性值30%是没有引号的。
第三个效果，本来是想着，attr()拿来就直接用，不用再转化。结果没有生效。
![]()
查看元素样式，attr()方法前后，拿到的值都是"50%"，是带引号的。
没有生效的属性值，是带引号的。
我们再看看第四个作为伪类content填充的例子：
![]()
因为是填充，所以这里是字符串最合适不过了。
个人的理解，attr获取属性，默认传入数值类型，可能只认整型数字，不认百分比。可能"%"这个符号导致转化失败，只能认为它是字符串。如果是像素px反而还认识。
![]()
这里传入"300 px""30 px"通过attr()转化都成功了，但是"50 %"依旧转化失败。
另外，如果把px连着写，传入那就真的都认为是字符串，转化失败。
![]()
其他情况下的使用，默认都是没有问题的，因为属性值，除了数字类型，其他颜色值，定位，显示本身就是字符串。不涉及单位转换。