使用JavaScript将样式套用至CSS伪元素

Question

Hi I was trying to change the style of a pseudo element based on the screen size but i believe my syntax is wrong somewhere. 嗨，我试图根据屏幕大小更改伪元素的样式，但我认为我的语法在某处是错误的。 I google the problem but could not find the exact solution. 我用谷歌搜索问题，但找不到确切的解决方案。 Below is my css- 以下是我的CSS-

.cBox{background-color: #efeff0; margin: 15px 0px -80px 0px;
display: inline-block;
margin-left: -8px;
margin-top: 55px;
position: relative;
width: 101%;}

.cBox:before{
border-bottom: 45px solid #efeff0;
border-left: 650px solid transparent;
border-right: 650px solid transparent;
content: "";
height: 0px;
left: 0;
position: absolute;
top: -45px;
width: 0px;}

Now the border left property of cBox:before should have half value of the screen size i.e. if screen size is 1300px, then border left should have a value of 650px(border-left:650px). below is my HTML-


 <body onload="myFunction()">
<div class="cBox"> 
<div style="text-align:center;">Some text here</div>
</div>
<script>
function myFunction(){
var x = window.getComputedStyle(document.querySelector('.cBox')
,':before').getPropertyValue('border-left');
if(window.outerWidth >=900) x[0].style.borderLeft = "screen.availWidth/2px solid transparent"; 
else {x[0].style.borderLeft = "screen.availWidth/2px solid transparent"; }
}
</script>
</body>

I know x[0].style.borderLeft syntax is not correct please suggest!

Answer 1

Use CSS media queries to set styles for different screen sizes instead of JS. 使用CSS媒体查询来设置不同屏幕尺寸（而不是JS）的样式。

<style>
    .cBox:before { border-left: 250px solid transparent; }

    @media(min-width: 900px) { 
        .cBox:before { border-left: 0 solid transparent; }
    }
</style>

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 参考： https : //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Modifying the style of sudo elements using JS is not possible. 无法使用JS修改sudo元素的样式。 You can add style tags to the head though: 您可以将样式标签添加到头部：

<script>
if (calculatedWidth > 900) {
    document.styleSheets[0].addRule('.cBox:before', 'border-left: 0 solid transparent');
}
</script>

使用JavaScript将样式套用至CSS伪元素

问题描述

1 个解决方案

解决方案1
0 2017-06-03 05:38:23

使用JavaScript将样式套用至CSS伪元素

问题描述

1 个解决方案

解决方案1 0 2017-06-03 05:38:23

解决方案1
0 2017-06-03 05:38:23