如何记录当前的css环境？ [英] How to record current css environment?

问题描述

我正在使用一个web项目，其中我使用jQuery拖放功能，以及调整元素等，每次我关闭浏览器或重新加载，一切都回到了头。我想保持我的状态一点点，所以我认为只是保存整个环境和重新加载环境比记录每一个变化更容易。

我试图使用jQuery将整个css环境存储到一个javascript变量，而不必循环遍历每个元素，然后每个元素的每个可能的属性。

  var cssEnvironment = document.css（）; 
  

然后当窗口关闭，浏览器退出，浏览器重新打开，页面重新打开，动作。

  document.css（）= cssEnvironment; 
  

一切都会恢复。有没有办法获得类似这样的功能？

解决方案

由于你处理拖放和调整大小jQuery，所有这些更改都是对内联样式进行的。您的外部样式表和< style> 块将不会更改。

em>必须循环遍历元素，但不能通过每个属性。您可以简单地获取每个元素的 style 属性。由于稍后将加载此状态并将这些样式分配给特定元素，因此您只会处理具有 id set的元素（否则您将无法

此演示创建一个JSON对象并保存到 localStorage 。

演示： http://jsfiddle.net/ThinkingStiff/VLXWs/

脚本：

  function saveState（）{
 var elements = document.querySelectorAll（'body *'），
 state = []; 
 for（var index = 0; index< elements.length; index ++）{
 if（elements [index] .id&& elements [index] .style.length）{
 state.push（{id：elements [index] .id，style：elements [index] .style.cssText}）; 
}; 
}; 
 window.localStorage.setItem（'state'，window.JSON.stringify（state））; 
}; 
 
 function loadState（）{
 var state = window.localStorage.getItem（'state'）; 
 if（state）{
 var styles = window.JSON.parse（state）; 
 for（var index = 0; index< styles.length; index ++）{
 document.getElementById（styles [index] .id）.style.cssText = styles [index] .style; 
}; 
}; 
}; 
 
 document.getElementById（'one'）.addEventListener（'click'，function（）{
 this.style.color =='green'？this.style.color ='black '：this.style.color ='green'; 
}）; 
 document.getElementById（'two'）.addEventListener（'click'，function（）{
 this.style.color =='red'？this.style.color ='black'：this。 style.color ='red'; 
}）; 
 document.getElementById（'three'）.addEventListener（'click'，function（）{
 this.style.color =='blue'？this.style.color ='black'：this。 style.color ='blue'; 
}）; 
 document.getElementById（'save'）.addEventListener（'click'，saveState）; 
 
 loadState（）; 
  

HTML：

 < div id =one>点击切换< / div> 
< div id =two>点击切换< / div> 
< div id =three>点击切换< / div> 
< button id =save> save< / button> 
< div>切换颜色，保存，重新加载页< / div> 
  

I'm working on a web project where I'm using jQuery drag and drop functionality, along with resizing elements, etc, and every time I close my browser or hit reload, everything goes back to scratch. I'd like to maintain my state a little bit, so I'm thinking it would be easier to just save the whole environment and reload the environment than record every change.

I'm trying to use jQuery to store the full css environment into a javascript variable, without having to loop through every element, and then every possible property of every element.

I was hoping it could be as simple as:

var cssEnvironment = document.css();

And then when the window gets closed, browser quit, browser reopened, page reopened, I would reverse the action.

document.css() = cssEnvironment;

And everything would be restored. Is there any way to get functionality similar to this?

解决方案

Since you're dealing with drag-and-drop and resizing in jQuery, all of these changes are made to the inline styles. Your external stylesheets and <style> blocks are not going to change.

You will have to loop through the elements, but not through each property. You can simply grab the style attribute for each element. Since you'll be loading this state later and assigning these styles to specific elements, you'll only be dealing with elements with id set (otherwise you won't be able to find it later to set it).

This demo creates a JSON object and saves to localStorage.

Demo: http://jsfiddle.net/ThinkingStiff/VLXWs/

Script:

function saveState() {
    var elements = document.querySelectorAll( 'body *' ),
        state = [];
    for( var index = 0; index < elements.length; index++ ) {
        if( elements[index].id && elements[index].style.length ) {
            state.push( { id:elements[index].id, style: elements[index].style.cssText } );
        };
    };
    window.localStorage.setItem( 'state', window.JSON.stringify( state ) );
};

function loadState() {
    var state = window.localStorage.getItem( 'state' );
    if( state ) {
        var styles = window.JSON.parse( state );
        for( var index = 0; index < styles.length; index++ ) {
            document.getElementById( styles[index].id ).style.cssText = styles[index].style;
        };
    };
};

document.getElementById( 'one' ).addEventListener( 'click', function() {
    this.style.color == 'green' ? this.style.color = 'black' : this.style.color = 'green';
});
document.getElementById( 'two' ).addEventListener( 'click', function() {
    this.style.color == 'red' ? this.style.color = 'black' : this.style.color = 'red';
});
document.getElementById( 'three' ).addEventListener( 'click', function() {
    this.style.color == 'blue' ? this.style.color = 'black' : this.style.color = 'blue';
});
document.getElementById( 'save' ).addEventListener( 'click', saveState );

loadState();

HTML:

<div id="one">click to toggle</div>
<div id="two">click to toggle</div>
<div id="three">click to toggle</div>
<button id="save">save</button>
<div>toggle colors, save, reload page</div>

这篇关于如何记录当前的css环境？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！