20.05.2010, 15:12
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
Работа с объектом style (CSSStyleDeclaration)
Появился такой вопрос:
Есть объект, допустим:
styleList: {
height: "5px",
borderColor: "#000000",
border: "1px solid #000000"
//.......
}
И есть какой-нибудь элемент на странице, допустим <div>.
Какими способами можно синхронизовать выше упомянутый объект с объектом style элемента на странице.
Надеюсь понятно написал
И просьба без jquery.
Заранее спасибо!
__________________
.
|
|
20.05.2010, 15:14
|
Профессор
|
|
Регистрация: 21.01.2010
Сообщений: 1,022
|
|
for (var i in styleList) {
node.style[i] = styleList[i];
}
|
|
20.05.2010, 15:17
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
а ещё есть предложения?
Вышеупомянутый уже рассматривал
__________________
.
Последний раз редактировалось Skipp, 20.05.2010 в 15:24.
|
|
20.05.2010, 15:37
|
Профессор
|
|
Регистрация: 21.01.2010
Сообщений: 1,022
|
|
А чем Вам не нравится этот?
Другие варианты врядли найдутся, работа с хэшами возможна только через for…in.
|
|
20.05.2010, 15:45
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
Да не то что бы это не нравилось, чистой воды любопытство
__________________
.
|
|
21.05.2010, 08:23
|
Аспирант
|
|
Регистрация: 23.08.2008
Сообщений: 30
|
|
Может не с той стороны, но зачем вообще нужен этот "объект styleList"?
Читать стиль так:
var css
if (element.currentStyle) css = element.currentStyle
else
if (window.getComputedStyle) css = window.getComputedStyle(element, null)
if (css != undefined) {
// css ...
}
Запись соответственно:
element.style[param] = value
И синхронизировать ничего вроде бы не нужно.
var get_style = function (element) {
var css
if (element.currentStyle) css = element.currentStyle
else
if (window.getComputedStyle) css = window.getComputedStyle(element, null)
return css
}
var get_style_param = function (element, param) {
var css = get_style(element)
param = param.replace(/-\D/g, function (match) { return match.charAt(1).toUpperCase() })
return css ? css[param] : null
}
var set_style_param = function (element, param, value) {
param = param.replace(/-\D/g, function (match) { return match.charAt(1).toUpperCase() })
element.style[param] = value
}
Оно?
|
|
21.05.2010, 09:21
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
Ваш метод намного громоздкий и скажу что он намного медленней чем предыдущий Уж извините.
С объектом проще работать чем с любым другим.
Так же как я понимаю, доступ к объекту так же осуществляется быстрее и проще, чем чем...., да тут всё на объектах, наверно не зря
А вообще, всё равно спасибо.
__________________
.
|
|
21.05.2010, 10:00
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
[offtop]Столько всего интересного вытаскивается из ComputedCSSStyleDeclaration в Fx 3.6
body {
background-attachment: scroll;
background-color: rgb(0, 75, 82);
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: separate;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 0);
border-right-style: none;
border-right-width: 0px;
border-spacing: 0px 0px;
border-top-color: rgb(0, 0, 0);
border-top-style: none;
border-top-width: 0px;
bottom: auto;
caption-side: top;
clear: none;
clip: auto;
color: rgb(0, 0, 0);
content: none;
counter-increment: none;
counter-reset: none;
cursor: auto;
direction: ltr;
display: block;
empty-cells: show;
float: none;
font-family: verdana,geneva,lucida,lucida grande,arial,helvetica,sans-serif;
font-size: 13.3333px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
height: 3785.2px;
left: auto;
letter-spacing: normal;
line-height: 16px;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
marker-offset: auto;
max-height: none;
max-width: none;
min-height: 0px;
min-width: 0px;
ime-mode: auto;
opacity: 1;
outline-color: rgb(0, 0, 0);
outline-style: none;
outline-width: 0px;
outline-offset: 0px;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
page-break-after: auto;
page-break-before: auto;
pointer-events: auto;
position: static;
quotes: \\u201C\ \\u201D\ \\u2018\ \\u2019\;
right: auto;
table-layout: auto;
text-align: start;
text-decoration: none;
text-indent: 0px;
text-shadow: none;
text-transform: none;
top: auto;
unicode-bidi: embed;
vertical-align: baseline;
visibility: visible;
white-space: normal;
width: 1287px;
word-spacing: 0px;
z-index: auto;
-moz-appearance: none;
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
-moz-background-size: auto auto;
-moz-binding: none;
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-box-align: stretch;
-moz-box-direction: normal;
-moz-box-flex: 0;
-moz-box-ordinal-group: 1;
-moz-box-orient: horizontal;
-moz-box-pack: start;
-moz-box-shadow: none;
-moz-box-sizing: content-box;
-moz-column-count: auto;
-moz-column-width: auto;
-moz-column-gap: 13.3333px;
-moz-column-rule-color: rgb(0, 0, 0);
-moz-column-rule-width: 0px;
-moz-column-rule-style: none;
-moz-float-edge: content-box;
-moz-force-broken-image-icon: 0;
-moz-image-region: auto;
-moz-outline-radius-bottomleft: 0px;
-moz-outline-radius-bottomright: 0px;
-moz-outline-radius-topleft: 0px;
-moz-outline-radius-topright: 0px;
-moz-stack-sizing: stretch-to-fit;
-moz-transform: none;
-moz-transform-origin: 50% 50%;
-moz-user-focus: none;
-moz-user-input: auto;
-moz-user-modify: read-only;
-moz-user-select: auto;
-moz-window-shadow: default;
word-wrap: normal;
clip-path: none;
clip-rule: nonzero;
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
dominant-baseline: auto;
fill: rgb(0, 0, 0);
fill-opacity: 1;
fill-rule: nonzero;
filter: none;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
lighting-color: rgb(255, 255, 255);
image-rendering: auto;
mask: none;
marker-end: none;
marker-mid: none;
marker-start: none;
shape-rendering: auto;
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
text-anchor: start;
text-rendering: auto;
}
[/offtop]
|
|
21.05.2010, 10:23
|
|
.
|
|
Регистрация: 30.03.2010
Сообщений: 1,813
|
|
Интересто, а как вы получили данные?
__________________
.
|
|
21.05.2010, 10:31
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
var i, styles = getComputedStyle(document.body, null), css = [];
for (i = 0; i < styles.length; i++) {
css.push(styles[i] + ": " + style.getPropertyValue(styles[i]));
}
alert(css.join(";\n"));
|
|
|
|