原生代码获取css属性并更改样式

var cbl=true;
function showhide(){ 
    var kd=$('.container').css("width");
    if(cbl){
        $('#lr').attr('class','col-12 col-md-12 col-xl-12');
        $('#slidebar').attr('class','col-0 col-md-0 col-xl-0');        
        $('#sidebarbtn').css('background-image','url(images/left.png)');
        if(kd=="1330px"){
            $('.content').css("width","33.3%");
            $('.content').css("float","left");
        }else if(kd=="768px"){
            $('.content').css("width","50%");
        }else{
            $('.content').css("width","100%");
        }
        $('#slidebar').hide(); 
        $('#gb').hide();
        cbl=false;
    }
 else{//4.2原来隐藏则显示侧边栏，修改按钮上的文字，根据分辨率设置左侧及侧边栏宽度，修改文章宽度
        $('#lr').attr('class','col-12 col-md-6 col-xl-8');
        $('#slidebar').attr('class','col-12 col-md-6 col-xl-4'); 
        $('#sidebarbtn').css('background-image','url(images/right.png)');
        if(kd=="1330px"){
            $('.content').css("width","50%");
        }else{
            $('.content').css("width","100%");
        }
        $('#slidebar').css('display','block'); 
        cbl=true;
    }
}
我改成了
var cbl=true;//侧边栏：已显示
function showhide(){ 
    var kd = document.querySelectorAll(".container")[0].offsetWidth;
    var dw = document.querySelectorAll('.content');
    var width = window.getComputedStyle(content).getPropertyValue('width');
    var obar = document.getElementById("slidebar");
    var obtn = document.getElementById("slidebarbtn");
    var lr = document.getElementById("lr");
    var gb = document.getElementById("gb");
    if(cbl){//4.1 原来显示则隐藏侧边栏，修改按钮上的文字，根据分辨率设置左侧及侧边栏宽度，修改文章宽度
        lr.setAttribute("class",'col-12 col-md-12 col-xl-12');
        obar.setAttribute("class",'col-0 col-md-0 col-xl-0');     
        obtn.style.backgroundImage = 'url(images/left.png)';
        if(kd==1330){
            dw.style.width = '33.3%'; 
        }else if(kd==768){
            document.querySelectorAll(".content")[0].style.width="50%";
        }else{
            document.querySelectorAll(".content")[0].style.width="100%";
        }
        obar.style.display = 'none';
        gb.style.display ='none';
        cbl=false;
    }
    else{//4.2原来隐藏则显示侧边栏，修改按钮上的文字，根据分辨率设置左侧及侧边栏宽度，修改文章宽度
        lr.setAttribute("class",'col-12 col-md-6 col-xl-8');
        obar.setAttribute("class",'col-12 col-md-6 col-xl-4'); 
        obtn.style.backgroundImage = 'url(images/right.png)';
        if(kd==1330){
            document.querySelectorAll(".content")[0].style.width="50%";
        }else{
            document.querySelectorAll(".content")[0].style.width="100%";
        }
           obar.style.display = 'block';
        cbl=true;
    }

jQuery部分改为原生代码

描述以下你遇到了什么问题，如何解决的，然后没有解决掉，最后想要达到什么效果

参考GPT和自己的思路：

要通过原生代码获取CSS属性并更改样式，可以使用如下代码：

// 获取宽度
var width = document.querySelector('.container').style.width;

// 修改样式
document.querySelector('.container').style.width = '100px';

注意，这种方式只能获取和修改行内样式，不能获取和修改外部样式表（即link标签中引入的样式表）中的样式。如果要获取和修改外部样式表中的样式，可以使用getComputedStyle方法：

// 获取宽度
var width = window.getComputedStyle(document.querySelector('.container')).getPropertyValue('width');

// 修改样式
document.querySelector('.container').style.width = '100px'; （使用此方法修改样式也只能修改行内样式）

需要注意的是，这样的操作可能会对网页的性能造成一定的影响，因此在实际使用中还需要谨慎。

获取：
document.querySelector('.container').style.width;

修改:
document.querySelector('.container').style.width = '10px';

该回答引用GPTᴼᴾᴱᴺᴬᴵ
使用原生JavaScript获取CSS属性并更改样式可以使用以下代码：

// 获取样式
var container = document.querySelector('.container');
var width = window.getComputedStyle(container).getPropertyValue('width');

// 更改样式
container.style.width = '500px';

注意事项：

获取样式使用 window.getComputedStyle 方法，需要传入一个参数表示要获取样式的元素，返回一个包含所有计算后样式属性的对象；
获取样式属性需要使用 getPropertyValue 方法，传入一个参数表示要获取的样式属性名，返回该属性对应的值；
更改样式属性可以直接使用元素的 style 属性，需要传入两个参数，第一个参数表示要更改的样式属性名，第二个参数表示要设置的值。