Работа с объектом style (CSSStyleDeclaration)
Появился такой вопрос:
Есть объект, допустим: styleList: { height: "5px", borderColor: "#000000", border: "1px solid #000000" //....... } И есть какой-нибудь элемент на странице, допустим <div>. Какими способами можно синхронизовать выше упомянутый объект с объектом style элемента на странице. Надеюсь понятно написал:) И просьба без jquery. Заранее спасибо! |
for (var i in styleList) { node.style[i] = styleList[i]; } |
а ещё есть предложения?:)
Вышеупомянутый уже рассматривал:) |
А чем Вам не нравится этот?
Другие варианты врядли найдутся, работа с хэшами возможна только через for…in. |
Да не то что бы это не нравилось, чистой воды любопытство:)
|
Может не с той стороны, но зачем вообще нужен этот "объект 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 } Оно? |
Ваш метод намного громоздкий и скажу что он намного медленней чем предыдущий:) Уж извините.
С объектом проще работать чем с любым другим. Так же как я понимаю, доступ к объекту так же осуществляется быстрее и проще, чем чем...., да тут всё на объектах, наверно не зря:) А вообще, всё равно спасибо. |
[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] |
Интересто, а как вы получили данные?
|
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")); |
Цитата:
var css = get_style(document.body) Из моего же примера. Правда, как Вы говорите, будет медленно. Но зато не только в Fx. |
Часовой пояс GMT +3, время: 17:24. |