Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Работа с объектом style (CSSStyleDeclaration) (https://javascript.ru/forum/events/9488-rabota-s-obektom-style-cssstyledeclaration.html)

Skipp 20.05.2010 15:12

Работа с объектом style (CSSStyleDeclaration)
 
Появился такой вопрос:
Есть объект, допустим:

styleList: {
		height: "5px",
		borderColor: "#000000",
                border: "1px solid #000000"
                //.......
	}


И есть какой-нибудь элемент на странице, допустим <div>.

Какими способами можно синхронизовать выше упомянутый объект с объектом style элемента на странице.

Надеюсь понятно написал:)
И просьба без jquery.
Заранее спасибо!

exec 20.05.2010 15:14

for (var i in styleList) {
node.style[i] = styleList[i];
}

Skipp 20.05.2010 15:17

а ещё есть предложения?:)
Вышеупомянутый уже рассматривал:)

exec 20.05.2010 15:37

А чем Вам не нравится этот?

Другие варианты врядли найдутся, работа с хэшами возможна только через for…in.

Skipp 20.05.2010 15:45

Да не то что бы это не нравилось, чистой воды любопытство:)

autosoft 21.05.2010 08:23

Может не с той стороны, но зачем вообще нужен этот "объект 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
}

Оно?

Skipp 21.05.2010 09:21

Ваш метод намного громоздкий и скажу что он намного медленней чем предыдущий:) Уж извините.

С объектом проще работать чем с любым другим.

Так же как я понимаю, доступ к объекту так же осуществляется быстрее и проще, чем чем...., да тут всё на объектах, наверно не зря:)

А вообще, всё равно спасибо.

Octane 21.05.2010 10:00

[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]

Skipp 21.05.2010 10:23

Интересто, а как вы получили данные?

Octane 21.05.2010 10:31

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"));

autosoft 22.05.2010 11:49

Цитата:

Сообщение от Skipp (Сообщение 55920)
Интересто, а как вы получили данные?

var css = get_style(document.body)

Из моего же примера. Правда, как Вы говорите, будет медленно.
Но зато не только в Fx.


Часовой пояс GMT +3, время: 17:24.