如何使用java脚本更改下面的css代码

How do i change the css code below with java script

本文关键字：css 代码何使用 java 脚本更新时间：2023-09-26

我想把下面的代码用JavaScript格式放在一个html文件中。代码---

@media (min-width: 1100px) {
    .ow_miniic_comment.newsfeed_comment_btn,
    .ow_miniic_like.newsfeed_like_btn,
    div.ow_dnd_widget,
    .ow_newsfeed_avatar,
    .ow_bl.ow_box_toolbar li,
    .ow_newsfeed_body,
    .ow_ipc_info {
        visibility: hidden;
    }
    .ow_miniic_comment.newsfeed_comment_btn.already-visible,
    .ow_miniic_like.newsfeed_like_btn.already-visible,
    div.ow_dnd_widget.already-visible,
    .ow_newsfeed_avatar.already-visible,
    .ow_bl.ow_box_toolbar li.already-visible,
    .ow_newsfeed_body.already-visible,
    .ow_ipc_info.already-visible {
        animation: none;
        visibility: visible;
    }
    .ow_miniic_comment.newsfeed_comment_btn.animation_start {
        visibility: visible;
        -webkit-animation-name: zoomIn;
        -moz-animation-name: zoomIn;
        -o-animation-name: zoomIn;
        -ms-animation-name: zoomIn;
        animation-name: zoomIn;
        -webkit-animation-duration: 0.3s;
        -moz-animation-duration: 0.3s;
        -o-animation-duration: 0.3s;
        -ms-animation-duration: 0.3s;
        animation-duration: 0.3s;
    }
}

想把上面的代码放在一个带有JavaScript格式的html文件中。

是否有任何可能压缩代码以更快地加载网站。

包含jquery，然后将此代码放入

   $( document ).ready(function() {
     var style =  document.createElement('style');
     var css = "@media (min-width: 1100px) {"+
                 ".ow_miniic_comment.newsfeed_comment_btn,"+
                 ".ow_miniic_like.newsfeed_like_btn,"+
                 "div.ow_dnd_widget,"+
                 ".ow_newsfeed_avatar,"+
                 ".ow_bl.ow_box_toolbar li,"+
                 ".ow_newsfeed_body,"+
                 ".ow_ipc_info {"+
                   "visibility: hidden;"+
                 "}"+
                 ".ow_miniic_comment.newsfeed_comment_btn.already-visible,"+
                 ".ow_miniic_like.newsfeed_like_btn.already-visible,"+
                 "div.ow_dnd_widget.already-visible,"+
                 ".ow_newsfeed_avatar.already-visible,"+
                 ".ow_bl.ow_box_toolbar li.already-visible,"+
                 ".ow_newsfeed_body.already-visible,"+
                 ".ow_ipc_info.already-visible {"+
                   "animation: none;"+
                    "visibility: visible;"+
                 "}"+
                 ".ow_miniic_comment.newsfeed_comment_btn.animation_start       {"+
                 "visibility: visible;"+
                 "-webkit-animation-name: zoomIn;"+
                 "-moz-animation-name: zoomIn;"+
                 "-o-animation-name: zoomIn;"+
                 "-ms-animation-name: zoomIn;"+
                 "animation-name: zoomIn;"+
                 "-webkit-animation-duration: 0.3s;"+
                 "-moz-animation-duration: 0.3s;"+
                 "-o-animation-duration: 0.3s;"+
                 "-ms-animation-duration: 0.3s;"+
                 "animation-duration: 0.3s;"+
               "}"+ 
             "}";

    style.innerHTML = css;
    $('body').prepend(style);
  });